Table of Contents

About

Z Order in CSS.

Firebug Z Index

Syntax

.dropdown-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1070;
}

Usage:

  • set the z-index on the outermost parent

Why it does not work

The z-index property applies only to positioned element.

It means that the position property should not be static (the default, ie also known as normal flow)

Demo: 

a {
  z-index: 1000;
}
.relative {
  position:relative;
}
.cover   {
    padding-top: 50px;
    margin-top: -40px;
    position: relative;
    z-index: 0;
    width:100%;
    border:1px solid steelblue;
}

<p>
    <a href="#">You can't click this static link</a> but <a class="relative" href="#">you can click this relative link</a>
</p>  
<p class="cover">I cover the link via the margin and padding</p>
  • Result: You can't click the link created by the anchor element because it has the default position value of static
Rendered by WebCode

Example: Bootstrap

Bootstrap utilize a z-index scale (see also Github - z-index scale) that’s been designed to properly layer:

from _variables.scss 

$zindex-dropdown-backdrop:  990 !default;
$zindex-navbar:            1000 !default;
$zindex-dropdown:          1000 !default;
$zindex-fixed:             1030 !default;
$zindex-sticky:            1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Documentation / Reference