這是我的簡單代碼。* {? 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條經驗 獲得超8個贊
要點是你提到了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條經驗 獲得超3個贊
位置為：絕對的元素；相對于最近定位的祖先定位（而不是相對于視口定位，如固定）。如果你想顯示所有三個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 關注
- 162 瀏覽
添加回答
舉報
0/150
提交
取消