CODEWITHSUNDEEP
htmlcss
user3810317
user3810317

Reputation: 45

CSS relative vs absolute position

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 .

Upvotes: 0

Views: 891

Answers (2)

Alohci
Alohci

Reputation: 82966

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.

Upvotes: 1

Akashii
Akashii

Reputation: 2281

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

Upvotes: 1

Related Questions