这是我的简单代码。* { 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>现在，类一和类二具有绝对位置，因此它们不再是正常文档流的一部分。因此，红色的第三类移动到顶部。我明白那个。但是一班（黄色）和二班（蓝色）发生了什么？我认为三班应该转移到顶部并与一班和二班重叠。那么，这里发生了什么？
3 回答
弑天下
TA贡献1818条经验 获得超7个赞
要点是你提到了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>
一只名叫tom的猫
TA贡献1906条经验 获得超2个赞
位置为：绝对的元素；相对于最近定位的祖先定位（而不是相对于视口定位，如固定）。如果你想显示所有三个div，你可以试试这个：
.one {
background: yellow ;
height: 100px ;
}
.two {
background: blue ;
height: 400px ;
}
您只需要删除position:absolute，因为它的工作方式类似于固定位置。我希望它有帮助。如果还有疑问，欢迎讨论！
泛舟湖上清波郎朗
TA贡献1818条经验 获得超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 ;
}
- 3 回答
- 0 关注
- 100 浏览
添加回答
举报
0/150
提交
取消