在CSS中，如果position:absolute的默認行為是display:block那么為什么我的輸出顯示為else[display:inline-block]-有解無憂

div
{
  width:200px;
  height:200px;
  position: absolute;
}

.first-container
{
  background-color: #9AD0EC;
}

.second-container
{
  background-color: red;
  left: 200px;
}

.third-container
{
  background-color: blue;
  left:400px;
}

即使我將display屬性覆寫為block，它仍然會給出相同的輸出。為什么除法元素沒有擋住它前面的空間？輸出：在 CSS 中，如果 position: absolute 的默認行為是 display:block 那么為什么我的輸出顯示為 else[display:inline-block]

而不是：

在 CSS 中，如果 position: absolute 的默認行為是 display:block 那么為什么我的輸出顯示為 else[display:inline-block]

uj5u.com熱心網友回復：

正常檔案流中不再存在絕對定位的元素。相反，它位于自己的層上，與其他所有內容分開。它們不是根據元素在正常檔案流中的相對位置來定位元素，而是指定元素應該與包含元素的每個邊的距離。developer.mozilla.org/en-US/docs/Web/CSS/position （“包含元素”是初始包含塊。） 頂部、底部、左側和右側用于相對于包含塊定位。

用你的代碼解釋原因---

/* when you give 'div' style like this nested div's also get position absolute*/
/* absolute positioned elements positions relative to its nearest positioned element.*/
/* then each container div's positioned relative to its nearest div */
/* comment this div style and use below div for solution. */
div { 
width: 200px;
height: 200px;
position: absolute;
}

/* positioned relative to upper div */
.first-container {
background-color: #9ad0ec;
}

/* positioned relative to nearest positioned (first-container) div */
.second-container {
background-color: red;
left: 200px;
}
/* positioned relative to nearest positioned (second-container) div */
.third-container {
background-color: blue;
left: 200px;
top: 200px;
}
<body>
<div>
  <div class="first-container" />
  <div class="second-container" />
  <div class="third-container" />
</div>
</body>

需要將“頂部”或“底部”設定為容器樣式以顯示所需的輸出。檢查這個沙箱

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/445173.html

標籤：javascript html css 网络

上一篇：jq帶單引號bash腳本

下一篇：我已經升級了我的php，但是<??>代碼開始不起作用？