Can't understand relative property of position

Question

I'm learning CSS from basis and have done a small sample: https://jsfiddle.net/L290pjwb/

div {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  box-sizing: border-box;
}
.a {
  position: static;
}
.b {
  position: relative;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
}

<div class="a">A</div>
<div class="b">B</div>
<div class="b">B1</div>

Boxes are located in such way:

All right, I understood, that position: static is the default position model for HTML elements and it can't be relocated just by adding the top, bottom, right, left properties. position: relative is like static, but offers some kind of offset, which static can't.

My question is: why isn't B1 box located like this:

?

@NenadVracar The main point why am I confusing because of the last element. It has the left offset, but it doesn't have the top offset, despite on CSS-property "top: 10px; ". B1 box is located closely by top, but has offset from left where the simple B box has both top & left offset. — , Oct 01 '16 at 13:45
If you still need a visual reference. The red border, indicates where the box was *normally* before the offset. http://i.stack.imgur.com/FKiPZ.png .. So there **is** a top offset. — AA2992, Oct 01 '16 at 15:14

score 1 · Answer 1 · edited May 23 '17 at 11:53

The html element is positioned like a static element, by only one difference. You can modify his position. But physically, the element is placed at top: 0; and left: 0;.

Here is a explication about the behavior.

Using position: relative; is just like using static position, the difference >is making an element position: relative;, you will be able to use top, >right, bottom and left properties, though the element will move, but >physically it will be in the document flow..

See this answer.

score 0 · Accepted Answer · answered Oct 01 '16 at 14:50

Relative positioning places the element where it would be if it was statically positioned and then offsets it from that position without influencing anything else.

B is put where it would be normally and then offset. B1 is put where it would be normally (i.e. immediately after where B would be normally without positioning) and then offset.

You would only get this effect if the static position for B1 was calculated from the offset position of B instead of the static position of B.

If you want to move elements about and have their new position influence the position of other elements: Use margins instead of relative positioning.

div {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  box-sizing: border-box;
}
.a {
  position: static;
}
.b {
  position: static;
  margin-top: 10px;
  margin-left: 10px;
  width: 100px;
  height: 100px;
}
.b + .b {
  margin-left: 20px;
}

<div class="a">A</div>
<div class="b">B</div>
<div class="b">B1</div>

Marek Janoud · Answer 3 · 2016-10-01T13:49:41.427

-1

B1 isnt located as you ask because the top/left offset is aplied to their default position, what confuse you is that B and B1 doenst have offset from each other, thats because the new position does not affect other elements, try change .b top and left properties to margin-top and margin-left

edited Oct 01 '16 at 13:49

answered Oct 01 '16 at 13:38

Marek Janoud

430
3
8

1

`static` is the default. And you are confusing `static` with `fixed`. – Turnip Oct 01 '16 at 13:39

Rob · Answer 4 · 2016-10-01T16:54:10.700

-1

You are positioning the elements relative to where they would be placed in the normal flow. In this case, the div would occur after div B but would get the same style values and, therefore, be positioned the same as the other div.

edited Oct 01 '16 at 16:54

answered Oct 01 '16 at 13:42

Rob

14,746
28
47
65

"relative to their parent" — No. Relative positioning is relative to the position they would have if they were position: static. – Quentin Oct 01 '16 at 14:45
@Quentin Whoops! You are correct. I'm so used to the question asking about absolutely positioned elements within relative boxes. Fixed. – Rob Oct 01 '16 at 16:54

score -1 · Answer 5 · answered Oct 01 '16 at 14:43

-1

Hey you can add id to B1 and just put margin:10px; It will give result what you want.

div {
    width      : 50px;
    height     : 50px;
    border     : 1px solid black;
    box-sizing : border-box;
}

.a {
    position: static;
}

.b {
    position : relative;
    top      : 10px;
    left     : 10px;
    width    : 100px;
    height   : 100px;
}
#B1 {
margin:10px;
}

<div class = "a">A</div>
<div class = "b">B</div>
<div class = "b" id="B1">B1</div>

answered Oct 01 '16 at 14:43

vineeta kande

44
5

1

The point of this question is to understand `position` property (layout system) for DOM elements mixing different available values, *NOT* just achieving the final picture result with any available CSS property. – Oct 01 '16 at 14:47

Can't understand relative property of position

5 Answers5