CSS - 使用絕對定位

Question

這裏有一個參考http://cssdesk.com/rHWcz

我試圖做的是有div的一個是包含在盒子眼影盒陰影覆蓋了所有包含的div。我認爲使用絕對定位可能會給我一些問題，但它必須是絕對定位的。 無論哪一個，但其中一個盒子的div不能放在盒子陰影的頂部。 任何想法？

Answer 1

爲解決這個問題，您可能需要解決一些問題。第一個是你的HTML是模糊/不良形成：

<div class="out"><div class="left"> 
</div> 
<div class="right"></div> 

我的假設是，你真正的意思是：

<div class="out"> 
<div class="left"></div> 
<div class="right"></div> 
</div> 

（你是缺少一個右</div>）

有了這個固定，最簡單的解決方案實際上是將潛在標記（.outdiv）的取出，並改爲將影子創建爲覆蓋。

例子：

<div class="out"> 
<div class="left"></div> 
<div class="right"></div> 
<div class="shadow"></div> 
</div> 

有了這個做，你可以很容易地放置在要他們.left和.right<div>元素，然後迫使.shadowdiv到頂部出現。

考慮下面的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爲了得到它出現在頂部。

Here is a working cssdesk來證明它在行動中。

編輯：

正如在評論中提到 - 原來問題實際上詢問只有兩個盒子中的一個出現的box-shadow下。如果你想他們中的一個出現以上它，只需使其顯示後的.shadow<div>移動這個盒子的HTML標籤，就像這樣：

<div class="out"> 
<div class="left"></div> 
<div class="shadow"></div> 
<div class="right"></div> 
</div> 

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

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

Answer 2

.left, .right { 
    z-index: -1; 
} 

不過，您必須將背景色除去.out。無法在其他人的盒子陰影和背景之間放置元素。

Answer 3

另一種替代方法是創建另一個元素的高度和寬度的容器，並將其放置在絕對的左上角。

你可以看到一個example here

position:absolute; 
top:0; 
left:0; 
width:100%; 
height:100%; 

你會遇到與不能夠點擊定位元素下方的任何內容與箱陰影的問題。解決這個問題的方法是在用戶懸停時隱藏它。

Answer 4

HTML

<div class="wrapper"> 
    <div class="out"></div> 
    <div class="left"></div> 
    <div class="right"></div> 
</div> 

CSS

.wrapper { 
    position: relative; 
    width:600px; 
    height:600px 
} 
.out { 
    width:600px; 
    height:600px; 
    background-color:aliceblue; 
    position:relative; 
    -webkit-box-shadow: inset 0px 0px 5px 5px ; 
    box-shadow: inset 0px 0px 5px 5px; 
    z-index: 2; 
} 
.left { 
    width:100px; 
    height:100px; 
    background-color:green;left:0; bottom:0; 
    position:absolute; 
    z-index: 1; 
} 
.right { 
     width:100px; 
     height:100px; 
     background-color:red;right:0; bottom:0; 
     position:absolute; 
     z-index:4; 
} 

DEMO

http://jsfiddle.net/sqJyw/4/ 

說明

我加上包裹你內容的div，操縱你的samll div的z-index來顯示或隱藏它們。