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 .
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments