具有绝对位置的 div 被隐藏

Question

这是我的简单代码。* {  margin: 0;  padding: 0;  box-sizing: border-box;}.one {  background: yellow;  height: 100px;  position: absolute;}.two {  background: blue;  height: 400px;  position: absolute;}.three {  background: red;  height: 300px;}<div class="one"></div><div class="two"></div><div class="three"></div>现在，类一和类二具有绝对位置，因此它们不再是正常文档流的一部分。因此，红色的第三类移动到顶部。我明白那个。但是一班（黄色）和二班（蓝色）发生了什么？我认为三班应该转移到顶部并与一班和二班重叠。那么，这里发生了什么？

Answer 1

要点是你提到了absolutediv 的高度，但从未提到宽度。所以absolutediv 并没有消失，但由于宽度为零而没有显示。

我们应该记住，当您将任何元素设置为 a 时，absolute它应该设置width, height，将内容放入其中或提及left right坐标。

* {

  margin : 0;

  padding: 0 ;

  box-sizing: border-box;

}

.one {

  background: yellow ;

  width: 100px;

  height: 100px ;

  position: absolute ;

}

.two {

  background: blue;

  height: 400px ;

  position: absolute ;

  left: 25%;

  right: 25%;

}

.three {

  background: red ;

  height: 300px ;

}

<div class="one">

</div>

<div class="two">

</div>

<div class="three">

</div>

Answer 2

位置为：绝对的元素；相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。如果你想显示所有三个div，你可以试试这个：

.one {

  background: yellow ;

  height: 100px ;

}

.two {

  background: blue ;

  height: 400px ;

}

您只需要删除position:absolute，因为它的工作方式类似于固定位置。我希望它有帮助。如果还有疑问，欢迎讨论！

Answer 3

如果你想看到隐藏的div，那么你需要添加一个z-index属性。

.one {

  background: yellow ;

  width: 100px;

  height: 100px ;

  position: absolute ;

  /* Increase numbers as your need */

  z-index: 1;

}

.two {

  background: blue;

  height: 400px ;

  position: absolute ;

  left: 25%;

  right: 25%;

  /* Increase numbers as your need */

  z-index: 2;

}

.three {

  background: red ;

  height: 300px ;

}