家長插圖框陰影重疊的子元素

<div class='A' id='AA'>  
    <div class='listContainer'> 
      This div is cutting Parents inset box-shadow 
    </div> 
</div>

我的問題是，爲什麼父的插圖框陰影不重疊的孩子嗎？有沒有辦法讓它重疊。

p.s：我不想爲孩子添加插入陰影，而是使其看起來好像父母的投影是在孩子身上投下陰影。

來源

2013-12-16 Kathmandu

你需要用z-index播放設置元素的順序/可視性。

問題是，在A元素中，你也有背景。如果您設置了孩子的負指數，它將被背景隱藏。要解決

一個posibility將在其上創建一個僞元素，並設置陰影：

.A { 
    width: 80%; 
    position: absolute; 
    top: 0; 
    height: 300px; 
    background-color: #408800; 
    padding: 0px; 
} 

.A:after { 
    content: ""; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    width: 12px; 
    box-shadow: -12px 0 10px -10px #000000 inset; 
    z-index: 2; 
}

demo

來源

2013-12-16 18:13:57 vals

感謝。你很近，但這個解決方案阻止我點擊listContainer上的任何鏈接作爲A：在重疊整個div之後。沒有事件可以從listContainer中觸發，因爲它完全被屏蔽。 – Kathmandu

更改了答案。現在僞元素只有12px寬。 – vals

上帝我恨自己沒有搞清楚。非常感謝。 – Kathmandu