Z-indexes in Drupal 8

Last updated on
3 November 2016

Working with z-indexes (layers) in Drupal, themers may need to do some hunting around to know if something they are moving up or down in the stack is going to cover, or be covered by an element that is themed by a core module or theme. To save themers the time of finding out what layer things are on, below is a table showing all of the instances of z-index in core. The module or theme with inheritance cells only contain multiple entries if the inheritance doesn't change the z-index value, otherwise they get a new line.

z-index Module/theme with inheritance CSS selector(s)
10000 jquery-joyride/tour/stable .joyride-expose-cover
9999 jquery-ui .ui-tooltip
1260 jquery-dialog/dialog/classy .ui-dialog
1259 jquery-dialog/dialog ui-widget-overlay
1250 toolbar/stable .toolbar .toolbar-bar | .toolbar .toolbar-tray
1000 system/stable .ajax-progress-fullscreen
1000 jquery-ui/classy .ui-dialog .ajax-progress-throbber
1000 bartik body:not(:target) .region-primary-menu .menu-toggle
1000 simpletest/stable a.simpletest-collapse:focus, hover
502 toolbar/stable .toolbar-oriented .toolbar-bar
502 toolbar/stable .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon
501 toolbar/stable .toolbar .toolbar-tray
501 settings-tray .settings-tray
500 contextual .contextual
500 contextual/stable .contextual-links
500 system/stable table.sticky-header
499 block/stable .block-demo-backlink
499 node/bartik .node-preview-container
102 jquery-joyride/tour/stable .joyride-expose-wrapper
101 jquery-joyride/tour/stable .joyride-tip-guide
300 quickedit/stabe .quickedit-validation-errors
300 quickedit/stabe .quickedit-form
102 jquery-joyride/tour/stable .joyride-expose-wrapper
101 jquery-joyride/tour/stable .joyride-tip-guide
100 quickedit/stable .quickedit-toolbar-container
100 quickedit/stable .quickedit-form-container
100 dropbutton/classy .dropbutton-multiple.open
100 jquery-joyride/tour/stable .joyride-modal-bg
100 jquery-ui .ui-selectable-helper
100 jquery-ui .ui-front
99 quickedit/stable .quickedit-editable.quickedit-highlighted
98 quickedit/stable .quickedit-editable
51 views/stable .views-displays .tabs .open > a
50 views/stable .views-displays .tabs .action-list
50 seven .skip-link
50 bartik .skip-link
15 seven .tabs.primary .tabs__tab.is-active | .is-horizontal .tabs.secondary .tabs__tab
11 ckeditor/stable ckeditor-buttons:hover + focus
10 ckeditor/stable ckeditor-buttons
10 seven .button:focus
10 ckeditor/seven .cke_reset_all .cke_dialog_footer_buttons a.cke_dialog_ui_button:focus
10 seven .is-collapse-enabled .tabs:before | .is-horizontal .tabs:before |  .is-collapse-enabled .tabs__trigger
5 ckeditor .cke_dialog_close
3 seven .js .dropbutton-wrapper .dropbutton-widget .dropbutton-action a:hover, active, focus
2 views/stable dropbutton
2 views/stable .js .dropbutton-wrapper .dropbutton .dropbutton-action > .ajax-progress-throbber
2 seven .vertical-tabs__menu-item focus active
2 contextual/stable .contextual.open .trigger
2 jquery-ui .ui-slider .ui-slider-handle
2 ckeditor .cke_dialog_resizer
2 ckeditor .cke_dialog_tabs
1 ckeditor/seven .cke_dialog_body
1 seven .vertical-tabs__menu-item.is-selected
1 jquery-ui .ui-slider .ui-slider-range
-1 ckeditor .cke_dialog_ui_radio_input
-1 ckeditor .cke_iframe_shim
-1 toolbar/stable .toolbar-oriented .toolbar-tray-vertical > .toolbar-lining:before
        
-1 quickedit/stable #quickedit-toolbar-fence