Question

当我尝试解决导致我未解决的未解决question的问题时，我决定将 Green DIV 提交到前面，因为内容没有流失它。

结构

绿皮书：主DIV.rack
橙色和灰色纸张：通过CSS插入：之前和：之后

HTML

<div class="rack">
 Content 
</div><!-- End Rack -->

CSS

.rack {
    width: 70%;
    height: 100%;
    background: #7FAE68;
    margin: 155px 0 100px 0;
    position: relative;
    float: left;
    left: 15%;
    z-index: 9999;
    transform:rotate(1deg);
    -ms-transform:rotate(1deg);
    -webkit-transform:rotate(1deg);
    padding-bottom:50px;
}
 .rack::before {
 content: "";
 background:  #E1BB70;
position: absolute;
 height: 100%;
 width: 100%;
 z-index: -2;
 transform:rotate(1deg);
 -ms-transform:rotate(1deg);
 -webkit-transform:rotate(1deg);
 float: left;
 left: 0%;
}
 .rack::after {
 content: "";
 background: #E5E8EC;
position: absolute;
 height: 100%;
 width: 100%;
 z-index: -1;
 transform:rotate(-1deg);
 -ms-transform:rotate(-1deg);
 -webkit-transform:rotate(-1deg);
 border: solid 1px #ddd;
 left: 0%;
   top: 0;
}

注意如果您查看fiddle here，无论高度如何，您都会看到内容不会超出主DIV（格力纸）。既然如此，我最好的选择就是将绿色DIV带到顶端。没有什么我没有尝试过无济于事。任何有关如何实现这一目标的帮助。

此图片显示内容（例如侧边栏）仍在绿色（主要）DIV内。 enter image description here

Answer 1

感兴趣的问题。

来自此awesome post的图片将让您更多地了解伪元素的图层堆栈：

pseudo elements layers stack

然后你就会意识到你的要求是不可能的。

无论如何，我创建了一些类似于你需要的东西，使用box-shadow制作另一个＆＃34; stack＆＃34;。看小提琴。

JSFiddle

Answer 2

以前的海报非常正确。使用:before，:after和content创建的元素是应用于它们的.rack和z-index的子元素不是全局的，但在相对定位的条件下运行家长。这就是为什么你不能将这些移到.rack之后的原因。一种解决方案是将内容包装在div中，并在包装器div上使用:before和:after。

这里是小提琴：http://jsfiddle.net/73Fyk/1/。

一个警告。将:before和:after元素堆叠在.rack后面的方法不是相对定位.rack。然后，绝对放置的:before和:after定位，在这种情况下，body内的.rack可以轻松移动到{{1}}后面。我不喜欢后一种方法。最好将相关实体保持在一起，只需添加一小部分标记来包装内容并从那里滚动。

Answer 3

“我没有尝试过。没有任何关于如何实现这一目标的帮助。”

为什么不使用嵌套的div？同样适用，代码更直观。在这里演示：http://jsbin.com/vizer/1/edit?html,output。

这是用过的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo Stacked Paper</title>
<style>
html {
    font-size: 62.5%;
}
body {
    font: normal 1.3em Verdana;
    padding: 75px;              /* for the demo */
    background-color: white;    /* for the JSBin demo */
}
.rackGrandParent {
    background-color: lightgrey;
    width: 200px;
    transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
}
.rackParent {
    background-color: gold;
    transform:rotate(-4deg);
    -ms-transform:rotate(-4deg);
    -webkit-transform:rotate(-4deg);
}
.rack {
    background-color: lightseagreen;
    transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    -webkit-transform:rotate(2deg);
    padding: 10px;
}
</style>
</head>
<body>
    <div class="rackGrandParent">
        <div class="rackParent">
            <div class="rack">Mauris eu lacus ac nunc tincidunt vehicula. Donec congue, ligula quis vehicula pellentesque, nisi lacus sodales elit, quis elementum nunc risus non ligula. Maecenas eget bibendum ante. Sed bibendum lectus sodales faucibus mattis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vel dolor quis metus facilisis dignissim. Suspendisse erat nibh, mollis nec pellentesque id, mattis eu purus. Quisque a nulla pretium, dignissim lectus at, tempor ipsum. Integer quis arcu leo. Maecenas feugiat, nisi viverra mattis pulvinar, urna nulla porttitor orci, vitae condimentum velit nisi sed turpis.</div>
        </div>
    </div>
</body>
</html>

在绝对DIV上堆叠相对DIV

3 个答案:

JSFiddle