CSS - z-index property (Layout third axis or Overlap order)

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

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





Discover More
CSS - (Box) Positioning (Scheme)

CSS This section is all how boxes are positioned / laid out on the page. boxcontent (text, image) a box located at the right side and its content at the left side a box taking the whole width...
Boxdim
CSS - Background (Image)

The background of an element is the total size of the element: including padding and border but not the margin. The margin is transparent. When two element overlap, you can send one element to...
Grid Form With Horizontal Vertical Alignment
CSS - Grid

grid is a CSS layout system that provides a mechanism: to divide the available space into columns and rows (two-dimensional grid) to position into one or more intersections an html element (known...
Firebug Layout
HTML - Layout

layout float with div table html5
Card Puncher Data Processing
UI - Overlay

An overlay component is a component that comes above the actual components in a absolute position. In Html, it would have a higher value on the z scale (ie z-index) When two elements overlay each other,...
Web Security - Clickjacking

A page that provides users with an interface to perform actions that the user might not wish to perform needs to be designed so as to avoid the possibility that users can be tricked into activating the...
What is a positioned element

This page describes what a positioned element is for CSS



Share this page:
Follow us:
Task Runner