Since position absolute will remove the element from the document flow, I am expecting elements with position absolute without setting top/bottom/left/right in a same container will be put on the exact same location. But it turned out, it is not the case.
I am trying to simulate what I mean in here. Please run the code snippet to see what I mean.
.first, .second, .third {
width: 25%;
height: 30px;
display: inline-block;
}
.first {
border: 1px solid black;
}
.second {
border: 1px solid red;
}
.third {
border: 1px solid blue;
}
.absolute {
position: absolute;
background-color: purple;
width: 10%;
height: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="absolute"></div>
<div class="first"></div>
<div class="second"></div>
<div class="absolute"></div>
<div class="third"></div>
<div class="absolute" style="background-color: black; z-index:-1"></div>
</div>
</div>
</div>
It turned out that the second and third .absolute
div is stacked together on the same location, and the first div right on top it. Change the z-index to prove it was stacked.
I read this post position: absolute without setting top/left/bottom/right but still it does not makes sense to me at least in my case.
Please clarify my understanding. Much appreciated.
Referring to this post, What are the default top, left, botton or right values when position:absolute is used?
EDIT: It turned out that by not setting the top/bottom/left/right, it will set it automatically instead of zero. Zero would end up all these elements on the same location but not auto.But even it is auto, I don't understand how the second and third div ended up stacked together but not the first one? When the position is in static, it is three different locations. Having it top/bottom/left/right auto should put it in three different location as well supposedly