Scroll
Z-indexen in Drupal 8
Bij het werken met z-indexen (lagen) in Drupal moeten ontwikkelaars mogelijk experimenteren om erachter te komen of iets dat ze omhoog of omlaag in de stapel verplaatsen, een element zal overlappen of bedekt zal worden door een element dat door een core-module of een thema wordt gethematiseerd. Om tijd te besparen bij het uitzoeken wat er op welk niveau gebeurt, staat hieronder een tabel met alle gevallen van z-index in de core. Een module of thema met overerving bevat slechts enkele vermeldingen als de overerving de z-indexwaarde niet wijzigt; anders krijgen ze een nieuwe rij.
| z-index | Module/thema met overerving | 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 |