Question

由于position绝对会从文档流中删除元素，因此我希望在同一容器中没有设置top / bottom / left / right的位置绝对元素将放在完全相同的位置。但事实证明，事实并非如此。

我想在这里模拟我的意思。请运行代码段以查看我的意思。

＆＃13;

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

＆＃13;

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

＆＃13;

事实证明，第二个和第三个.absolute div在同一个位置堆叠在一起，第一个div在它顶部。更改z-index以证明它已堆叠。

我读了这篇帖子的位置：absolute without setting top/left/bottom/right但至少在我的情况下，它对我来说仍然没有意义。

请澄清我的理解。非常感激。

参考这篇文章，What are the default top, left, botton or right values when position:absolute is used?

编辑：事实证明，通过不设置顶部/底部/左/右，它会自动设置而不是零。 Zero会在同一个位置结束所有这些元素但不会自动。但即使它是自动的，我也不明白第二个和第三个div最终是如何堆叠在一起而不是第一个？当位置处于静止位置时，它是三个不同的位置。将它顶部/底部/左/右自动放在三个不同的位置，以及所谓的

绝对位置的默认位置，没有顶部/底部/左/右设置

0 个答案: