具有绝对位置的 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 {&nbsp; background: yellow ;&nbsp; height: 100px ;}.two {&nbsp; background: blue ;&nbsp; height: 400px ;}您只需要删除position:absolute，因为它的工作方式类似于固定位置。我希望它有帮助。如果还有疑问，欢迎讨论！

Answer 3

如果你想看到隐藏的div，那么你需要添加一个z-index属性。.one {&nbsp; background: yellow ;&nbsp; width: 100px;&nbsp; height: 100px ;&nbsp; position: absolute ;&nbsp; /* Increase numbers as your need */&nbsp; z-index: 1;}.two {&nbsp; background: blue;&nbsp; height: 400px ;&nbsp; position: absolute ;&nbsp; left: 25%;&nbsp; right: 25%;&nbsp; /* Increase numbers as your need */&nbsp; z-index: 2;}.three {&nbsp; background: red ;&nbsp; height: 300px ;}