This issue is related to #935738: z-index conflict between block context menu & overlay.
The z-index of the contextual links are set to 900. The toolbar has a z-index value of 600. This means that the contextual link gear wheel icon appears on top of the toolbar and shortcut bar. It does this for all contextual links I can find. There was one time I couldn't get it to break, but I can't recreate that anymore.
To recreate this issue, create a node that takes up enough space to cover the entire height of the page. Hover over the node to make the gear wheel appear, then scroll up. I would expect it to disappear when it reaches the toolbar, but it appears on top.
I suggest we be consistent with z-index extremes. Setting something to 900 is okay, but consider incrementing the various Drupal core elements by 5 so that they overlap the way we want them to? (ie. contextual links = 900, overlay = 905, toolbars = 910, etc).
Comment | File | Size | Author |
---|---|---|---|
#17 | no_issue.png | 6.41 KB | vikashsoni |
#10 | contextual_z_index-1102156-10.patch | 399 bytes | stpaultim |
#6 | 1102156-screenshot-after-firefox25.png | 2.82 KB | mimes |
#6 | 1102156-screenshot-before-firefox25.png | 2.59 KB | mimes |
#5 | Screen Shot 2013-12-19 at 19.39.05.png | 8.13 KB | Wim Leers |
Comments
Comment #1
danillonunes CreditAttribution: danillonunes commentedSome work with git grep gives me the following result about z-index usage on Drupal 7 (excluding jQuery UI styles):
Comment #2
Anonymous (not verified) CreditAttribution: Anonymous commentedSame here with the latest version (Drupal 7.14), here are the relevant CSS rules.
contextual.css:20 defines the following rule:
div.contextual-links-wrapper {z-index: 999;}
(other rules removed for brevity)
overlay-parent.css:24 defines the following rule:
.overlay-element {z-index: 501;}
(again, shortened for brevity)
And here is my workaround - I just added these rules into one of my own theme's CSS files:
/* OVERRIDES FOR OVERLAY Z-INDEX VALUES */
#overlay-container,
.overlay-modal-background,
.overlay-element {
z-index: 2500;
}
.overlay-element {
z-index: 2501;
}
html.overlay-open .displace-top,
html.overlay-open .displace-bottom {
z-index: 2600;
}
/* also added this so you can see the admin menu bar at the top while an overlay is open */
#toolbar {
z-index: 2600;
}
Comment #3
Wim LeersThis is not a problem in D8 anymore. It's still a problem in D7, sadly.
The fix is simple. Overlay's z-indexes are 500, 501 and 600. Toolbar's z-index is 600. Contextual links' is 999. Obviously that's why it's sitting on top of the toolbar.
So, changing Contextual links' to 450 fixes the problem.
Comment #4
Wim LeersNote that this causes bug reports in contrib projects.
Comment #5
Wim LeersScreenshots showing the fix:
Comment #6
mimes CreditAttribution: mimes commentedThis patch works, as tested in Firefox 25.0 and Chromium 28.0.
Comment #7
Wim LeersThanks for the review, mimes!
Marking RTBC since you confirmed that this fixes the problem.
Comment #9
droplet CreditAttribution: droplet commentedContextual links are used everywhere and contribute modules. Toolbar is a CORE module usually only do single task and admin only. I would say to adjust the value in toolbar if it's possible.
Comment #10
stpaultim CreditAttribution: stpaultim commentedFixed the patch.
Comment #11
stpaultim CreditAttribution: stpaultim commentedComment #12
lcampanis CreditAttribution: lcampanis commentedSomewhat related, I created a D7 backport of the contextual links in D8. Hope it helps :)
https://www.drupal.org/node/1914966
Comment #13
RainbowArrayWhile #9 suggested changing the z-index of the toolbar rather than the contextual links, the issue linked to in #4 shows that contextual links need to have their z-index lowered below the overlay as well as below the toolbar. It's certainly possible this could have an impact on themes and modules that have been working around this bug: it's equally true that this patch will fix a lot of head-scratching errors for those who haven't worked around this bug.
Given that there's already been testing that shows this works, and the latest patch is green, I'd suggest we move this back to RTBC.
Comment #16
David_Rothstein CreditAttribution: David_Rothstein commentedSeems like this needs a bit more discussion. The risk of arbitrarily decreasing the contextual links z-index is that now they could start appearing underneath page elements that they aren't supposed to, which I think is arguably a worse bug...
Comment #17
vikashsoni CreditAttribution: vikashsoni as a volunteer and at Zyxware Technologies commented@davidneedham there is no issue related to z-index available checked on same version for reference sharing screenshot ....