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
– user3810317, Commented Mar 13, 2017 at 9:04

Alohci · Accepted Answer · 2017-03-13 10:17:59Z

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.

Akashii · Accepted Answer · 2017-03-13 09:09:24Z

-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.

Could you please refer to the specific example, why do div2 and div3 appear below div1?
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.

Collectives™ on Stack Overflow

CSS relative vs absolute position

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related