родителей врезка Box-Shadow перекрывается дочерним элементом

Question

У меня есть этот код

http://jsfiddle.net/4fz5g/2/

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

Мой вопрос почему врезка окно тень родителя не перекрываются детям? Есть ли способ сделать это перекрытием.

p.s: Я не хочу добавлять тени для вставки для детей вместо этого, чтобы они выглядели так, как если бы тень родителя была «бросанием тени» над ее дочерними элементами.

Answer 1

Вы должны играть с Z-индекс, чтобы установить порядок/видимость элементов.

Проблема в том, что в элементе A у вас также есть фон. Если вы установите z-индекс дочернего отрицательного, он будет скрыт фоном.

Один вешать, чтобы решить, что бы создать мнимый элемент и установите тень на него:

.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

Answer 2

В то время как я не знаю, есть ли способ избежать этого,
добавление box-shadow: inherit; к дочернему элементу необходимо зафиксировать внешний вид
как это добавляет тот же врезку тень на него.

пример: http://jsfiddle.net/4fz5g/3/