CSS 阴影笼罩 div

Question

我正在尝试仅使用 div（框）和阴影来构建楼梯，但第三个阴影越过前面 box.I 需要阴影保留在那里，以便它在左侧可见，但在顶部可见应该被覆盖。我该如何解决这个问题？仅使用 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>

Answer 1

您是否尝试过使用 z-index 设置元素的堆叠顺序？ http://www.w3schools.com/cssref/pr_pos_z-index.asp

Answer 2

您必须使用 z-index。

根据W3school

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Jsfiddle

CSS 阴影笼罩 div

CSS Shadow over div

css

shadow