[wp-trac] [WordPress Trac] #26280: Z-index of the submenu not applied correctly in WP 3.8 Beta 1

[WordPress Trac]

#26280: Z-index of the submenu not applied correctly in WP 3.8 Beta 1
--------------------------+-----------------------------
 Reporter:  dennis_f      |      Owner:
     Type:  defect (bug)  |     Status:  new
 Priority:  normal        |  Milestone:  Awaiting Review
Component:  Appearance    |    Version:  trunk
 Severity:  normal        |   Keywords:
--------------------------+-----------------------------
 I found a problem with the z-index of the main admin menu - when you
 insert an element into the body content of an admin page and set a z-index
 to that element greater than 2 (for example 10), the admin submenu goes
 below the element and its default z-index of 9999 is ignored.

 You can easily replicate the problem with the browser developer tools, for
 example:
 1. Open the Dashboard page
 2. Use the developer tools to set z-index to the Welcome Panel element
 with class .welcome-panel:


 {{{
 .welcome-panel{
         position:relative;
         z-index:10;
 }
 }}}


 3. Hover the "Posts" menu item (or any submenu item that is close to the
 welcome panel) and you will see that the submenu is going below the panel:

 [[Image(http://img7.imageshack.us/img7/51/m980.png)]]

 Basically any element inserted to the content area with a z-index greater
 than 2 will be displayed on top of the submenu when a parent menu item is
 hovered.

 After tracing the problem, I found that the #adminmenuwrap element that
 wraps the entire menu has a z-index of 2 set in the
 ([http://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/wp-
 admin.css#L1904 wp-admin/css/wp-admin.css] file):


 {{{
 .sticky-menu #adminmenuwrap {
 position: fixed;
 top: 32px;
 left: 0;
 z-index: 2; /* needs to be above .sticky-menu #wpwrap */
 }
 }}}

 and as it is a parent of the submenu element that
 [http://core.trac.wordpress.org/browser/trunk/src/wp-admin/css/wp-
 admin.css#L1756 has a z-index of 9999]:


 {{{
 #adminmenu .wp-submenu {
 padding: 7px 0 8px;
 z-index: 9999;
 }
 }}}

 the z-index of 9999 of the submenu element is ignored and the z-index of 2
 that is set to the parent element is applied when the submenu is
 displayed.

 I have also created a [http://jsfiddle.net/nkq6N/ fiddle] with simple
 isolated elements to illustrate the problem.

--
Ticket URL: <http://core.trac.wordpress.org/ticket/26280>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software