0

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

Community
  • 1
  • 1
geckob
  • 7,680
  • 5
  • 30
  • 39
  • If you place all the `absolute` elements together, before the `inline-block` elements, you will get your desired result. – sideroxylon Jan 21 '16 at 03:28
  • @sideroxylon: yes. But I need it to be on different location. Which I thought, should not cause any issues – geckob Jan 21 '16 at 03:30

0 Answers0