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

> (World Wide) Web - (W3|WWW) > CSS - Cascading Style Sheets - Markup Language (HTML|XML) Skin > CSS - (Box) Positioning (Scheme)

1 - About

Z Order in CSS.

Advertising

3 - Syntax

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

4 - Example: Bootstrap

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

from _variables.scss

_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;

5 - Documentation / Reference

Advertising
web/css/positioning/z_index.txt · Last modified: 2019/03/30 16:56 by gerardnico