All geek questions in one place

Fold the relative DIV to the absolute DIV

As I try to solve the problem that led to this unresolved unresolved issue of mine , I decided to raise the Green DIV as the content does not expire.

Structure

  • Green Paper: Home 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 will see that the content does not go beyond the main DIV (gree) document no matter the height. Since that case, my best bet would be to bring a green div to the top. There is nothing that I have not tried to no avail. Any help on how this can be achieved.

, (, ) () DIV. enter image description here

+4
3

.

:

pseudo elements layers stack

, .

, - , box-shadow, "". . .

JSFiddle

+2

. , :before, :after content, .rack z-index, , , . .rack. div :before :after div.

: http://jsfiddle.net/73Fyk/1/.

. :before :after .rack , .rack . :before :after, body .rack. . , .

+1

" . , ".

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>
+1

Source: https://habr.com/ru/post/1547038/

More articles:


All Articles