css - 将相对 DIV 堆叠在绝对 DIV 上

Question

当我尝试解决导致此问题的问题时，我的 unsolved unsolved question , 我决定将 Green DIV 放在前面，因为内容不会从中溢出。

结构

1. 绿皮书:Main DIV.rack
2. 橙色和灰色纸张:通过 CSS :before 和 :after
插入

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(gree 纸)。既然如此，我最好的选择是将绿色 DIV 置于顶部。没有什么是我没有尝试过的。有关如何实现这一目标的任何帮助。

此图像显示内容(例如边栏)仍在绿色(主)DIV 内。

Answer 1

感兴趣的问题。

这张图片来自 awesome post会让你更加了解伪元素的层叠:

然后你会发现你的要求是不可能的。

无论如何，我创建了一些看起来与您的需要相似的东西，使用 box-shadow 制作另一个“堆栈”。看 fiddle 。

JSFiddle