Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.Problem/Motivation
Admin toolbar has default CSS of
#toolbar-bar {
z-index: 9999;
}This value is absolutely inappropriate, as it is higher than the recommended z-index of modal windows.
Remove this style without any replacement, the id selector is harmful, and the core CSS already has a high enough z-index for ".toolbar-bar"
Also see Z-indexes in Drupal 8
Proposed resolution
Change the z-index to 502.
#toolbar-bar {
z-index: 502;
}Remaining tasks
None.
User interface changes
None.
API changes
None.
Data model changes
None.
| Comment | File | Size | Author |
|---|---|---|---|
| #16 | css-z-index-of-toolbar-2913299-16.patch | 357 bytes | michal.sec |
| #13 | admin_toolbar_overlapping.png | 89.84 KB | Chi |
| #11 | css-z-index-of-toolbar-2913299-11.patch | 356 bytes | esod |
| |||
Comments
Comment #2
adriancid@hudri thanks for reporting I will take a look soon, next time please consider to use the Issue Summary Template to report an issue.
Comment #3
adriancidComment #4
eme CreditAttribution: eme commentedIndeed, we should try a z-index of 502
Comment #6
adriancidI edit the issue description and commit the change it works fine in my side, just need more test I think to close here the issue.
Comment #7
adriancidComment #8
hudriI'd recommend not to set the z-index at all, because it is already set by core toolbar, which is a dependency of Admin toolbar. IMHO there is no reason to override a sane default. DRY and KISS.
If there is a good reason to override it, please use a less specific selector (.whatever.classes) than an #ID: Frontend themes might need to make some small adjustments to the toolbar, e.g. because they have a fixed header or a fixed navigation themselves.
Comment #9
adriancidSome problems that this can cause are like #2917441: Maximize button and 8.x-1.20
Comment #10
esod CreditAttribution: esod at Memorial Sloan Kettering Cancer Center commented@hudri, I unintentionally wrote a duplicate issue for this problem. See Maximize button and 8.x-1.20. When we noticed the bug with the Maximize button, I didn't know what I had on my hands except a bit of a mess.
The z-index change is already in the 8.x-1.x version of the module. I've removed the z-index for the 8.x-1.20 version of the module in my issue. I'll write the patch to remove the z-index from 8.x-1.x.
Comment #11
esod CreditAttribution: esod at Memorial Sloan Kettering Cancer Center commentedHere's the patch to remove the z-index.
Comment #12
adriancid@eme it seems that is better remove the z-index, what do you think about this?
Comment #13
Chi CreditAttribution: Chi commentedWrong z-index value causes overlapping modal windows (Block UI, Views UI, etc).
Comment #15
adriancidComment #16
michal.sec CreditAttribution: michal.sec at Ciklum Western Europe for BurdaForward commentedPatch #13 will not fixed this problem, because is removing line
z-index: 502;, but in current version is linez-index: 9999;.Posting new fix.
Comment #17
adriancidHi @michal.sec the problem is fixed in the last commit in this issue, is 502 because we changed it before in #5 if you go the dev version you will see that it doesn't exists.