Question

我正在尝试仅使用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>

Answer 1

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

Answer 2

您必须使用z-index。

根据W3school

注意：z-index仅适用于定位元素（位置：绝对值， position：relative，或position：fixed）。

Jsfiddle

CSS阴影超过div

2 个答案: