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.

回答1:

Interested question.

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

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

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/24557655/stack-a-relative-div-on-an-absolute-div

标签

css

css3

css-float

z-index