Scorri
Z-index in Drupal 8
Lavorando con gli z-index (livelli) in Drupal, agli sviluppatori può capitare di dover sperimentare per capire se un elemento spostato verso l’alto o verso il basso nello stack andrà a coprire o a essere coperto da un elemento tematizzato da un modulo del core o da un tema. Per risparmiare tempo nel capire cosa succede a livello di rendering, di seguito è riportata una tabella che mostra tutte le istanze di z-index presenti nel core. Un modulo o un tema con celle di ereditarietà contiene solo alcune voci se l’ereditarietà non modifica il valore dello z-index, altrimenti ricevono una nuova riga.
| z-index | Modulo/tema con ereditarietà | Selettore CSS |
| 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 |