Admin submenu opens underneeth editor link tool

[Stoffe1]

Sub menus of the admin menu opens underneath the editor's link tool. Possibly a z-index problem.

[valentinbora]

Thank you so much for your ticket @Stoffe1 and welcome to WordPress Trac. We are sorry for the long time to reply, but all tickets matter!

[valentinbora]

With Classic Editor

[valentinbora]

With Block Editor

[valentinbora]

Issue confirmed at [47289] with both Classic and Block editor.

[samful]

Removing this line:
z-index: 100100; /* Same as the other TinyMCE "panels" */

from the div.mce-inline-toolbar-grp { rule in the wp-includes/css/editor.css

Solves the issue for the Classic Editor, but then the link tool appears behind the Admin Menu as in the screenshot below, is this the expected fix, or did you only want it to go behind the submenu?

---

Making Gutenburg like this would involve targeting the .components-popover CSS class for each each popup you want to act this way, or making the z-index of it less than the menu's.

---

At smaller screen/window sizes I would argue that this functionality would be missed and having a pop-up appear over the menu would be helpful. Can we get a second opinion on this?

[jaymanpandya]

I am not really sure on how to make changes on the code but here are the 2 changes that I think will fix the issue

• Add a new css rule targetting the id "adminmenumain" in load-styles.php:17 and set it to position relative and z-index to 100101 (1 more than the z-index of tinymce popover)

• Fix Admin bar layering by changing z-index from 99999 to 100101 to load-styles.php:4:1358

[michaelarestad]

It sounds like there isn't a need for design feedback here. Either of the fixes to z-index should get the job done.

[davidbaumwald]

Nothing stops multiple people from working on the same ticket at the same time. But I'm removing the ticket owner to make it clear no one is actively working on this one(the current owner has not participated in a long period of time).

[SergeyBiryukov]

Some relevant z-index numbers:

• Admin menu: #adminmenu .wp-submenu { z-index: 9999; }
• Link modal in block editor: .components-popover { z-index: 1000000; }
• Link modal in classic editor: div.mce-inline-toolbar-grp { z-index: 100100; }

At a glance, bumping #adminmenu .wp-submenu to 1000001 should fix this, but needs a careful investigation of these values' history and possible side effects. Moving to a future release for now.

[musicaljoeker]

Updating the value #adminmenu .wp-submenu { z-index: 9999; } to z-index: 1000001 does not force the submenu to appear over the link menu in the editor.

Instead, updating #adminmenuwrap { z-index: 9990 } to z-index: 1000001 forces the menu to appear over the editor link. However, this means a child elements of #adminmenuwrap may have a z-index lower than its parent, is this a concern? Do we need to cascade z-index heights?

Making this changes doesn't appear to cause any issues in the testing I've done, but this might not be an acceptable solution.

[kevin940726]

Popup overlapping weirdly with side menu

[kevin940726]

@musicaljoeker Unfortunately, just updating z-index of #adminmenuwrap to 1000001 will cause another side effect shown in the attachment above.

IMHO, I think this is currently not solvable, at it seems to be in a bigger scope than we thought.

The ​stacking context of the page is roughly like this:

Body
  #adminmenuwrap
    .wp-submenu-wrap
  .components-popover

So, we cannot make .components-popover show between #adminmenuwrap and .wp-submenu-wrap. The only option I can see is to "portal" the popovers/submenu to desired location and control their positioning with JavaScript somehow, and that's a huge amount of work.

However, we might could get an update to the side bar after 47012 landed, and hopefully, we could solve this issue once and for all.

[musicaljoeker]

@kevin940726 I agree with you. I did some more discovery on this issue and also found more problems when the z-index on #adminmenuwrap was updated to 1000001. In my testing, it also impacts the #wpadminbar

Resolving this does seem like it will take a bit of coordination.

[musicaljoeker]

Showing the z-index bug of the wpadminbar

[musicaljoeker]

Showing the z-index bug of the wpadminbar