考慮下面的CSS(我也歸你的CSS一些，以減少重復)： .out, .shadow {

height: 600px; width: 600px;

}

.out {

background-color: AliceBlue;

position: relative;

}

.shadow {

background: transparent;

-webkit-box-shadow: inset 0px 0px 5px 5px ;

box-shadow: inset 0px 0px 5px 5px;

position: absolute; top: 0; left: 0;

}

.left, .right {

height: 100px; width: 100px;

bottom: 0;

position: absolute;

}

.left {

background-color: green;

left: 0;

}

.right {

background-color: red;

right: 0;

}

因為.shadowdiv出現最后，你不需要任何特殊的z-order為了得到它出現在頂部。

編輯：

正如在評論中提到 - 原來問題實際上詢問只有兩個盒子中的一個出現的box-shadow下。如果你想他們中的一個出現以上它，只需使其顯示后的.shadow

移動這個盒子的HTML標簽，就像這樣：

這將導致.right盒(紅色的)出現以上的影子，而不是下面 - 不需要任何z-index骯臟。

我已經更新了cssdesk示例來代替顯示此版本。

總結

以上是生活随笔為你收集整理的css什么时候用绝对定位,CSS - 使用绝对定位的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。