/*
CSS controls the 'stacking order' of elements with the attribute known as the z-index. Each element below has a z-index value specfied. Explore these values by changing them and refreshing the browser to see the differences. Notice that each elements also has a 'position' value specified. This is critical: in order to 'call' the z-index the element must have a position value specified.
*/

html {
font: 12px/20px Arial, sans-serif;
background-color: white;        
}
body {
width:100%;
margin: 5% auto;
}
div {
opacity: 0.7;
position: relative;
}
h1 {
font-size: 16px;
font-weight: bold;
}
#div1, #div2 {
border: 1px dashed #696;
padding: 10px;
background-color: #cfc;
}
#div1 {
z-index: 5;
margin-bottom: 270px;
}
#div2 {
z-index: 5;
}
#div3 {
z-index: 4;
opacity: 1;
position: absolute;
top: 100px;
left: 180px;
width: 380px;
border: 1px dashed #900;
background-color: #fdd;
padding: 40px 20px 20px;
}
#div4, #div5 {
border: 1px dashed #996;
background-color: #ffc;
}
#div4 {
z-index: 6;
margin-bottom: 15px;
padding: 25px 10px 5px;
}
#div5 {
z-index: 1;
margin-top: 15px;
padding: 5px 10px;
}
#div6 {
z-index: 3;
position: absolute;
top: 80px;
left: 200px;
width: 150px;
height: 100px;
border: 1px dashed #009;
padding: 60px 10px;
background-color: #ddf;
text-align: right;
}