CODEWITHSUNDEEP
cssjquery-uiz-index
Jimbo
Jimbo

Reputation: 22964

jQueryUI Tabs Appear On Top of All Other Elements

My plain old CSS menus are appearing behind jQuery UI stuff like tabs! Even though the z-index of the containing divs are correct. Is there a way to resolve this?

CSS menus are appearing behind jQuery UI stuff like tabs

/* dropdown menu container */
#navigation-1 li ul.navigation-2 {
    margin:0;
    padding: 5px;
    display:none;
    position:absolute;
    top:71px;
    left:-71px;
    border-radius: 4px;
    border: 3px solid #ea453c;
    background:white;
    width: 730px;
    box-shadow: 0 1px 6px #999;
    z-index: 999;
}

Upvotes: 1

Views: 1885

Answers (2)

DavidHyogo
DavidHyogo

Reputation: 2898

I used Firebug to explore the CSS more carefully and found the the ui-menu class already has position set to absolute. I then added this rule:

.ui-menu{
    z-index: 10;                             
}

You may have to experiment with the exact value depending on circumstances but that value brought my menu items safely above the tabs. You could add a more specific selector for the menu's parent container if you only want to apply this to a specific menu.

Upvotes: 0

frogcoder
frogcoder

Reputation: 354

Yes. try to explore or experiments the position in the css like : relative, fixed, absolute etc.

Note: your not able to use z-index if your div/element doesnt have a position like relative, fixed, absolute etc. :D

Upvotes: 1

Related Questions