兩個div與同級別

陰影我也有陰影，並在同一個z-index的兩個div。兩個div與同級別

他們目前都在鑄造互相陰影。

我想他們喜歡的背景，但不會彼此都投射陰影。我該怎麼做呢？

來源

2012-07-23 Mr_Chimp

在這裏貼一些標記 – 2012-07-23 12:41:51

使用背景顏色？ – Christoph 2012-07-23 12:44:59

http://jsfiddle.net/mrchimp/5WQc8/ - 正如你所看到的頂部div有點紅。 – 2012-07-23 12:45:16

你不能有相同的堆放層兩種不同的元素。元素總是有不同的堆疊級別。這就是爲什麼你的第二個元素會影響第一個元素。（無z索引在DOM中appearence確定堆疊電平）

Z索引僅適用於非靜態定位的元素（相對的，絕對），以便將沒有幫助。

IMO你不能達到你想要的效果沒有一些小的CSS黑客（聲明一個非靜態位置的元素結合一個額外的包裝元素 - 不要聲明z-index父，但只有在子元素上）。

Example

但請隨時糾正我，如果我錯了。

來源

2012-07-23 13:01:24 Christoph

我認爲可能是這種情況。現在我要去掉其中一個div的投影。不理想，但現在足夠好！感謝您的迴應。 – 2012-07-23 13:20:24

@Mr_Chimp看看我的例子，看看這是否符合你的需求。 – Christoph 2012-07-23 13:26:53

我已經完成了，這是一個很好的解決方法，但現在我只是想解決問題，看看是否有人有另一種方法。正如我所說，現在我已經避免了這個問題，因爲這不是一個大問題，但我有興趣看看人們會怎麼做。再次感謝。 – 2012-07-23 14:34:34

使用這個簡單的CSS技巧，只是創建僞元件:after，設置其z-索引低於divs並給它一個陰影。以下代碼將在每個div下放下不重疊的陰影。工作示例http://jsfiddle.net/on38a8pz/1/。

div { 
    position: relative; 
} 

div:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    box-shadow: 0 0 30px black; 
    z-index: -1; 
}

來源

2014-08-19 09:37:46 MichalVales

兩個div與同級別

回答

相關問題