Support » Alpha/Beta/RC » Z-index of the submenu not applied correctly in WP 3.8 Beta 1

  • Resolved Deni

    (@dennis_f)


    Hi All,

    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

    After tracing the problem, I found that the #adminmenuwrap element that wraps the entire menu has a z-index of 2 (wp-admin/css/wp-admin.min.css file):

    .sticky-menu #adminmenuwrap {
    position: fixed;
    top: 32px;
    left: 0;
    z-index: 2;
    }

    and as it is a parent of the submenu element that 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 fiddle with simple isolated elements to illustrate the problem:

    http://jsfiddle.net/nkq6N/

    So, generally any element with a z-index greater than 2 inserted into the body content area of the admin panel will be displayed on top of the submenu item. I hope my explanation is clear enough.

Viewing 2 replies - 1 through 2 (of 2 total)
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Z-index of the submenu not applied correctly in WP 3.8 Beta 1’ is closed to new replies.