Stack a relative DIV on an absolute DIV

As I try to solve the problem that led to this my unsolved unsolved question, I decided to bring up the Green DIV to the front since the content doesn't bleed off of it.

Structure

Green paper: Main DIV.rack
Orange and Gray paper: inserted via CSS :before and :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;
}

Note If you look at the fiddle here, you'll see that the content doesn't bleed beyond the main DIV(gree paper) no matter the height. Since that's that's the case, my best bet would be to bring the green DIV to the top. There's nothing I haven't tried to no avail. Any help on how this can be achieved.

This image shows that the content(sidebar for example) is still within green(main)DIV. enter image description here

标签： css css3 css-float z-index

3条回答

够拽才男人

2楼-- · 2019-04-10 04:00

Interested question.

This image from this awesome post will make you understand more about layer stack of pseudo elements:

pseudo elements layers stack

then you will realize that your requirement is impossible.

Anyways, I created some thing looks similar to your need, using the box-shadow to make another "stack". See the fiddle.

JSFiddle

0人赞添加讨论(0) 举报

唯我独甜

3楼-- · 2019-04-10 04:06

Previous poster is quite correct. The elements created using :before, :after, and content are children of the .rack and z-index applied to them is not global, but operates within their relatively positioned parent. That's why you cannot move these behind the .rack. One solution is to wrap the content in a div and use :before and :after on the wrapper div.

Here's the fiddle: http://jsfiddle.net/73Fyk/1/.

One caveat. The way to stack the :before and :after elements behind the .rack is not to position the .rack relatively. Then, the absolutely placed :before and :after are positioned, in this case, within the body can be easily moved behind the .rack. I do not like this latter approach. It is much better to keep the related entities together and to just add a tiny hair of markup to wrap the content and to roll from there.

0人赞添加讨论(0) 举报

我想做一个坏孩纸

4楼-- · 2019-04-10 04:11

"There's nothing I haven't tried. Any help on how this can be achieved."

Why not just use nested divs? Works just as well, and the code is much more intuitive. Demo here: http://jsbin.com/vizer/1/edit?html,output.

And this is the used code:

<!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>

0人赞添加讨论(0) 举报

Stack a relative DIV on an absolute DIV

JSFiddle

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间