<div id="div1">
<h2>div #1</h2>
<code>position: relative;<br/>z-index: 5;</code>
</div>
<div id="div2">
<h2>div #2</h2>
<code>position: relative;<br/>z-index: 2;</code>
</div>
<div id="div3">
<div id="div4">
<h2>div #4</h2>
<code>position: relative;<br/>z-index: 6;</code>
</div>
<h2>div #3</h2>
<code>position: absolute;<br/>z-index: 4;</code>
<div id="div5">
<h2>div #5</h2>
<code>position: relative;<br/>z-index: 1;</code>
</div>
<div id="div6">
<h2>div #6</h2>
<code>position: absolute;<br/>z-index: 3;</code>
</div>
</div>* { margin: 0; }
html { padding: 20px; }
div {
position: relative;
opacity: 0.7;
}
#div1,
#div2 {
background-color: #cfc;
padding: 10px;
border: 1px dashed #696;
}
#div1 {
width: 160px;
height: 280px;
margin-bottom: -220px;
left: 300px;
z-index: 5;
}
#div2 {
width: 500px;
padding-top: 240px;
z-index: 2;
}
#div3 {
background-color: #fdd;
padding: 40px 20px 20px;
border: 1px dashed #900;
position: absolute;
top: 40px;
left: 100px;
width: 340px;
z-index: 4;
opacity: 1;
}
#div4,
#div5 {
background-color: #ffc;
border: 1px dashed #996;
}
#div4 {
padding: 25px 10px 5px;
margin-bottom: 15px;
z-index: 6;
}
#div5 {
padding: 5px 10px;
margin-top: 15px;
z-index: 1;
}
#div6 {
width: 180px;
background-color: #ddf;
padding: 300px 20px 20px;
border: 1px dashed #009;
position: absolute;
top: 20px;
left: 200px;
z-index: 3;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.