CSS Shadow over div

Я пытаюсь построить лестницу, используя только div (ящики) и тени, но третья тень выходит за переднюю рамку. Мне нужно, чтобы тень оставалась там, чтобы она была видна с левой стороны, но верхняя сторона должна быть закрыта. Как я могу решить это? Используя только CSS. Вот мой код. Спасибо.

<!DOCTYPE html>
<html>

    <head>
        <style>
            #div1 {
                margin-top:20px;
                margin-left:33px;
                width: 200px;
                height: 20px;
                border:1px solid black;
                background: #966F33;
                box-shadow: -7px -7px 5px #888888;
                transform: skewX(50deg);
            }
            #div2 {
                width: 200px;
                height: 50px;
                margin-left:45px;
                border:1px solid black;
                background-color: #966F33;
                box-shadow: -22px -10px 5px #888888;
            }
            #div3 {
                margin-left:58px;
                width: 200px;
                height: 20px;
                border:1px solid black;
                background: #966F33;
                transform: skewX(50deg);
                box-shadow: -7px -15px 5px #888888;
            }
            #div4 {
                width: 200px;
                height: 50px;
                margin-left:71px;
                border:1px solid black;
                background-color: #966F33;
                box-shadow: -23px -17px 5px #888888;
            }
        </style>
    </head>

    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </body>

</html>
Источник

2 ответа

Решение

Вы должны использовать z-index,

Согласно W3school

Примечание: z-index работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная или позиция: фиксированная).

Jsfiddle

Источник

Вы пытались использовать z-index установить порядок стека ваших элементов? http://www.w3schools.com/cssref/pr_pos_z-index.asp

Источник
Другие вопросы по тегам