CSS relative vs absolute position

Question

I'm trying to understand the difference between relative and absolute positions in CSS. I've read the explanations and definitions of both absolute and relative, yet I still find a particular example rather strange. Can someone explain why in the following example : Here's the HTML file :

body {
  display: block;
}

.d1 {
  margin-top: 100px;
  position: relative;
  width: 100px;
  height: 100px;
  background: #815BFF;
}

.d2 {
  position: absolute;
  margin-left: 100px;
  width: 100px;
  height: 100px;
  background: #815BFF;
}

.d3 {
  position: absolute;
  margin-top: 100px;
  margin-left: 200px;
  width: 100px;
  height: 100px;
  background: #815BFF;
}

<body>
  <div class="d1">div 1</div>
  <div class="d2">div 2</div>
  <div class="d3">div 3</div>
</body>

I've posted the example on http://codepen.io/l7uci/pen/JWNrRj.

If I change the position of any div from absolute to relative, why does the div itself not change, but all the divs that come after it take it as a reference and change according to it ? I was expecting the other divs to still be placed relative to the body, as in Difference between relative and absolute .

@MateBoy I was actually expecting the same thing, but the divs don't get positioned relative to the body, but to other siblings. — user3810317, Mar 13 '17 at 09:04

score 1 · Answer 1 · answered Mar 13 '17 at 09:09

1

-An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.

-An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

answered Mar 13 '17 at 09:09

Akashii

2,251
3
17
29

Could you please refer to the specific example, why do div2 and div3 appear below div1? – user3810317 Mar 13 '17 at 09:27
absolute is the trickiest position value. absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport. If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling. – Akashii Mar 13 '17 at 09:35

score 1 · Accepted Answer · answered Mar 13 '17 at 10:17

If you use position:absolute but don't set top, left, bottom or right, the element takes the position it would have had in normal flow, even though it is not itself in normal flow, so doesn't affect the position of subsequent elements.

So if you change an element without top, left, bottom or right from absolute to relative it doesn't move, this is it still takes it's place in normal flow, but it is now in normal flow, so subsequent elements will move to take account of its size.

CSS relative vs absolute position

2 Answers2