Stacking order of elements in a layout

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):

  1. The root element (<html>) .. this is at the bottom of stack..level 0
  2. The viewport (<body>)
  3. Block level elements in the normal page flow
    1. block1 is displayed on top of 1 and 2.
    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
  4. Floated elements (i.e. non-positioned elements). The div with class of float will be displayed on top of 1, 2 and 3
  5. Inline descendant elements in normal flow (span with class of inline will be on top of 1,2,3,4
  6. 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.

Tek Shinobi
Author: Tek Shinobi

Hiya Ninjas, I am the ninja who invented the fire, wheel, science, technology and everything intelligent this humanity has ever experienced since its evolution from monkeys and germs. Actually, above is a partial list. I also was involved with the Big Bang that created this universe. What was it like before the Big Bang is so secret that if I tell you, I will have to turn you into a hobbit and force you to be my gardener. Okay. Sayonanra, Namaste Tek Shinobi




No Comments


You can leave the first : )



Leave a Reply

Your email address will not be published. Required fields are marked *