All geek questions in one place

IE ignores Z-index on positioned elements

IE once again proves the curse of my existence. At the top of the site I'm working on, there is a horizontal menu whose element launches a menu with pure CSS, which is positioned as absolute in the parent DIV menu (positioned relatively). This perfectly positions the menu in both IE and W3C compatible browsers.

The problem occurs when I have more positioned elements further on the page. They are also positioned relative to each other, because inside them there is data that must be set absolute ... again, this is displayed correctly in all browsers that I tested it on.

The problem is that then the top menu opens, part is hidden by positioned elements further down the page - in fact, it is positioned BELOW by these elements, even though there are z-index properties for everyone. (both in the CSS file and in the line).

The only way to get IE to display it correctly is to place the actual HTML for the menu at the bottom of the page, below (in DOM terms) the elements located elsewhere on the page. I would do it as an absolute last resort.

All elements are of the same type (div). Here is the relevant HTML:

<div id='menu'> <div id='cat_menu' style='display:none;z-index:10000;'> <table cellspacing='0' cellpadding='0' class='brmenu' width='100%'> [data] </table> </div> 

 <div class='product_new' style='z-index:20;'>[data]</div> <div class='product_listing' style='background-color:#FFFFFF;'>[data]</div>

And the corresponding CSS:

 div#menu { height: 26px; padding: 0; position: relative; } div#cat_menu { position: absolute; top: 25px; left: 115px; width: 300px; z-index: 1000; } div.product_new { background-image: url("/images/sp_images.png"); background-position: 0 -108px; background-repeat: no-repeat; padding 0px; height: 40px; font-size: 9pt; margin-top: 5px; position: relative; z-index: 20; }
+4
source share
4 answers

I had the same problem. Having played a little, I agree with David: "IE only reliably displays z-indices for sibling elements."

I came up with a lightweight alternative solution. It seems that i.e. Makes the z-index for non-sibling elements equal to zero (as if they did not have a z-index). I solved the problem by establishing that the offending elements and their parent elements have a negative z-index, placing them under the elements with the z-index reset to zero, that is.

+2
source

The solution above for jQuery also seems to work with Prototype ... I have included the PrototypeJS code below:

 var zIndexNumber = 1000; $$("div").each(function(e) { e.setStyle({ zIndex: zIndexNumber }); zIndexNumber -= 10; });
0
source

A few notes:

  • suckerfish drop-down lists have proven effective. Why reinvent the wheel?
  • IE only reliably displays z-indexes for sibling elements. Because of this, it is best to use only the z-index elements, which are direct children of the BODY tag.
  • If you do not want to change the markup, you will most likely need to set the z-index in the #menu element above "20". The problem is that setting the z-index takes the element out of the stream (which is undesirable).
  • the style = "..." attribute makes css incredibly specific (requiring you to use "! important" in your stylesheet. Remember to transfer these style attributes)
  • "position: relative" hasLayout "triggers for IE
0
source

Source: https://habr.com/ru/post/1302721/

More articles:


All Articles