Почему псевдо элементы отображаются выше блоков? http://jsfiddle.net/tMBrK/ Css: .block1 { padding: 0 10px; position: relative; top: -11px; left: -2px; z-index: 9; } .block1::after { content: ""; position: absolute; bottom: 17px; left: 4%; width: 92%; height: 30%; box-shadow: 0 26px 25px rgba(0, 0, 0, 0.7); z-index: 8; } .block2 { padding: 0 10px; position: relative; width: 95%; left: 12px; right: 12px; margin-top: -11px; z-index: 7; } .block2::after { content: ""; position: absolute; bottom: 17px; left: 4%; width: 92%; height: 30%; box-shadow: 0 26px 25px rgba(0, 0, 0, 0.7); z-index: 6; } } Html: <div class="block1"></div> <div class="block2"></div>
