Lets take a look at this code:
HTML:
<html> <head></head> <body> <p>body content</p> <div class="block1">block1</div> <div class="block2">block1</div> <div class="float"> <p>float</p> <span> class="inline">inline</span> </div> <div class="position">position</div> </body> </html>
CSS:
.block1{
background: pink;
}
.block2{
background: red;
margin: -60px 0 0 20px;
}
.float{
background: lightblue;
float: left;
margin: -150px 0 0 100px;
}
.inline{
background: blue;
color: white;
padding: 10px 40px 10px 10px;
}
.position{
background: orange;
position: relative;
left: 180px;
top: -165px;
height: 110px;
}
The natural staking order of elements in this piece of code is (in ascending order in the stack):
- The root element (<html>) .. this is at the bottom of stack..level 0
- The viewport (<body>)
- Block level elements in the normal page flow
- block1 is displayed on top of 1 and 2.
- block2 stack order will be on top of block1 but in natural flow, it will be laid out below block1. If you use position: relative on block2 and then put a negative margin on it, you will see that it will be displayed on top of block1
- Floated elements (i.e. non-positioned elements). The div with class of float will be displayed on top of 1, 2 and 3
- Inline descendant elements in normal flow (span with class of inline will be on top of 1,2,3,4
- Positioned elements. div with class of position is at the top.
If we want to change this stacking order, we will do so by using z-index property on the element. Note that this property only works on positioned elements (meaning those with position: relative applied to them.. using position: absolute will move them outside of the natural page flow, which is something we don’t want).
So, we can display block1 on top of stack through this:
.block1{
background: pink;
position: relative;
z-index: 100;
}
Altering stacking order through z-index is most useful for uses like displaying tool-tips and drop-down menus that always need to be displayed on top. Use this property sparingly for other scenarios.
No Comments
You can leave the first : )