I often encounter a problem when, in IE 6-7, elements with position: relative are superimposed on elements with position: absolute, while browsers do not respond to the z-index. I would like to ask why this situation arises and how to deal with it. (As an example, a drop-down list with position: absolute and z-index: 999 will pop under the h2 tag with position: relative, if you turn off position: relative, then everything works ok)

    1 answer 1

    This is a fairly well-known bug in IE 6/7, a description of the problem and an example can be found here . The point is that the elements, when positioning, create a new stack context.

    In the case of your example, try setting z-index: -1; h2 element z-index: -1; . I just had a similar problem, and it helped.

    There is also a good article about the z-index property.

    Quote from the site about bugs IE 6 :

    If you are using Internet Explorer 6 or 7, it will cause you to reset the text. The solution to the parent element has been pointed out. In some cases, the position: relative.

    • The articles are good, but there are no recommendations on how to deal with this, and if I add z-index: -1, the title simply disappears. - makregistr 1:38 pm
    • a strange result .. I added another quote with a solution from a single site about IE 6 bugs. The problem is solved by installing z-index on the parent element. I have not tried it myself, but I have seen this solution on a number of sites - Pavel Azanov
    • 2
      Found the answer in the net, you need a parent block that contains a drop-down block and for which it is positioned, put a z-index larger than the drop-down block itself and everything is ok. - makregistr 2:23 pm