Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Elements with higher z-index are still positioned below elements with lower z-indices

Tags:

css

joomla

I am having a stupid issue with a Joomla Menu Module called Maxi Menu. Here is a screenshot:

Link to website

The problem seems to be caused because of z-index. I have checked using firebug, but haven't been able to found out how the lower menu is finding its way to show up on top.

The interesting fact is that after a menu item is hovered, its z-index is changed to 15000 higher than any other menuitem on the page.

How is it still going under the other menu items with 12000 and similar z-indices?

Firbug display of the z-indices:

enter image description here

like image 761
Starx Avatar asked Nov 04 '12 08:11

Starx


2 Answers

Add position:relative to the two divs that have z-index 10 and 20.

Z-indexing is calculated relative from the first parent that has a non static position (absolute, relative, fixed).

like image 129
Rik Avatar answered Nov 20 '22 17:11

Rik


You have to add a higher z-index to the parent ul element too, so if you have :

<ul class="menu banner_menu maximenuck" style="">
 <li class="maximenuck item184 parent first level1 " style="z-index : 12000;......

...then this will fix it

.menu.banner_menu.maximenuck {
 z-index: 15000;
}

enter image description here

like image 38
JFK Avatar answered Nov 20 '22 18:11

JFK