Z-Index inconsistency and overlapping [#1102156]

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
#10
#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
#5	Screen Shot 2013-12-19 at 19.38.50.png	9.57 KB	Wim Leers
#3	contextual_z_index-1102156-3.patch	492 bytes	Wim Leers
#3
	contextual link.jpg	12.39 KB	davidneedham

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

danillonunes CreditAttribution: danillonunes commented 12 May 2011 at 02:35

Some work with git grep gives me the following result about z-index usage on Drupal 7 (excluding jQuery UI styles):

modules/block/block.css               a.block-demo-backlink,
modules/block/block.css               a.block-demo-backlink:link,
modules/block/block.css               a.block-demo-backlink:visited {
modules/block/block.css                 z-index: 499;
modules/block/block.css               }
--                                    
modules/contextual/contextual.css     div.contextual-links-wrapper {
modules/contextual/contextual.css       z-index: 999;
modules/contextual/contextual.css     }
modules/contextual/contextual.css     div.contextual-links-active a.contextual-links-trigger {
modules/contextual/contextual.css       z-index: 1;
modules/contextual/contextual.css     }
--                                    
modules/overlay/overlay-child.css     #overlay-titlebar {
modules/overlay/overlay-child.css       z-index: 100;
modules/overlay/overlay-child.css     }
--                                    
modules/overlay/overlay-parent.css    #overlay-container,
modules/overlay/overlay-parent.css    .overlay-modal-background,
modules/overlay/overlay-parent.css    .overlay-element {
modules/overlay/overlay-parent.css      z-index: 500;
modules/overlay/overlay-parent.css    }
modules/overlay/overlay-parent.css    .overlay-element {
modules/overlay/overlay-parent.css      z-index: 501;
modules/overlay/overlay-parent.css    }
modules/overlay/overlay-parent.css    html.overlay-open .displace-top,
modules/overlay/overlay-parent.css    html.overlay-open .displace-bottom {
modules/overlay/overlay-parent.css      z-index: 600;
modules/overlay/overlay-parent.css    }
--                                    
modules/simpletest/simpletest.css     a.simpletest-collapse:focus,
modules/simpletest/simpletest.css     a.simpletest-collapse:hover {
modules/simpletest/simpletest.css       z-index: 1000;
modules/simpletest/simpletest.css     }
--                                    
modules/system/system.base.css        #autocomplete {
modules/system/system.base.css          z-index: 100;
modules/system/system.base.css        }
--                                    
modules/toolbar/toolbar.css           #toolbar {
modules/toolbar/toolbar.css             z-index: 600;
modules/toolbar/toolbar.css           }
--                                    
themes/bartik/css/style.css           #skip-link {
themes/bartik/css/style.css             z-index: 50;
themes/bartik/css/style.css           }
--                                    
themes/garland/color/preview.css      #preview #gradient-0 {
themes/garland/color/preview.css        z-index: 2;
themes/garland/color/preview.css      }
themes/garland/color/preview.css      #preview #text {
themes/garland/color/preview.css        z-index: 4;
themes/garland/color/preview.css      }
themes/garland/color/preview.css      #preview #img {
themes/garland/color/preview.css        z-index: 3;
themes/garland/color/preview.css      }
--                                    
themes/garland/style-rtl.css          #wrapper #container .breadcrumb {
themes/garland/style-rtl.css            z-index: 3;
themes/garland/style-rtl.css          }
--                                    
themes/garland/style.css              #skip-link {
themes/garland/style.css                z-index: 1000;
themes/garland/style.css              }
themes/garland/style.css              #branding,
themes/garland/style.css              #branding a:link,
themes/garland/style.css              #branding a:visited {
themes/garland/style.css                z-index: 2;
themes/garland/style.css              }
themes/garland/style.css              #wrapper #container .sidebar {
themes/garland/style.css                z-index: 2;
themes/garland/style.css              }
themes/garland/style.css              #wrapper #container .breadcrumb {
themes/garland/style.css                z-index: 3;
themes/garland/style.css              }
themes/garland/style.css              ul.main-menu {
themes/garland/style.css                z-index: 4;
themes/garland/style.css              }
themes/garland/style.css              ul.secondary-menu {
themes/garland/style.css                z-index: 4;
themes/garland/style.css              }
--                                    
themes/seven/style.css                #skip-link {
themes/seven/style.css                  z-index: 50;
themes/seven/style.css                }
themes/seven/style.css                .overlay #branding div.breadcrumb {
themes/seven/style.css                  z-index: 10;
themes/seven/style.css                }

Comment #2

Anonymous (not verified) CreditAttribution: Anonymous commented 11 June 2012 at 16:38

Version:

7.0

» 7.14

Same 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 Leers

Ghent 🇧🇪🇪🇺

CreditAttribution: Wim Leers commented 19 December 2013 at 18:19

Version:	7.14	» 7.24
Issue summary:	View changes
Status:	Active	» Needs review
Issue tags:		+Spark, +sprint

File	Size
contextual_z_index-1102156-3.patch	492 bytes

This 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 Leers

Ghent 🇧🇪🇪🇺

CreditAttribution: Wim Leers commented 19 December 2013 at 18:19

Note that this causes bug reports in contrib projects.

Comment #5

Wim Leers

Ghent 🇧🇪🇪🇺

CreditAttribution: Wim Leers commented 19 December 2013 at 18:41

File	Size
Screen Shot 2013-12-19 at 19.38.50.png	9.57 KB
Screen Shot 2013-12-19 at 19.39.05.png	8.13 KB

Screenshots showing the fix:

Comment #6

mimes CreditAttribution: mimes commented 26 December 2013 at 05:23

File	Size
1102156-screenshot-before-firefox25.png	2.59 KB
1102156-screenshot-after-firefox25.png	2.82 KB

This patch works, as tested in Firefox 25.0 and Chromium 28.0.

Comment #7

Wim Leers

Ghent 🇧🇪🇪🇺

CreditAttribution: Wim Leers commented 2 January 2014 at 10:01

Status:

Needs review

» Reviewed & tested by the community

Thanks for the review, mimes!

Marking RTBC since you confirmed that this fixes the problem.

Comment #8

16 March 2014 at 23:37

Status:

Reviewed & tested by the community

» Needs work

The last submitted patch, 3: contextual_z_index-1102156-3.patch, failed testing.

Comment #9

droplet CreditAttribution: droplet commented 17 March 2014 at 04:52

Version:

7.24

» 7.x-dev

Contextual 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 commented 17 March 2014 at 05:29

File	Size
contextual_z_index-1102156-10.patch	399 bytes

Fixed the patch.

Comment #11

stpaultim CreditAttribution: stpaultim commented 17 March 2014 at 05:31

Status:

Needs work

» Needs review

Comment #12

lcampanis CreditAttribution: lcampanis commented 21 June 2014 at 15:59

Somewhat related, I created a D7 backport of the contextual links in D8. Hope it helps :)

https://www.drupal.org/node/1914966

Comment #13

RainbowArray

she/her

English

Twin Cities, Minnesota

CreditAttribution: RainbowArray commented 8 July 2014 at 05:18

Status:

Needs review

» Reviewed & tested by the community

While #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 #14

25 July 2014 at 22:44

Status:

Reviewed & tested by the community

» Needs work

The last submitted patch, 10: contextual_z_index-1102156-10.patch, failed testing.

Comment #15

6 August 2014 at 17:02

Status:

Needs work

» Needs review

dcam queued 10: contextual_z_index-1102156-10.patch for re-testing.

Comment #16

David_Rothstein CreditAttribution: David_Rothstein commented 4 November 2014 at 04:15

Seems 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...