Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
I’m having a display problem with an absolute positioned div in IE6 + IE7
I’m trying to display a drop down menu. this drop down menu is positioned absolute.
now as soon as there’s another element below this menu that has position: relative, the absolute positioned drop down menu is displayed behind it.
this only happens in IE7 and 6 as mentioned above.
any ideas on how to fix this?
The css property z-index is there to let you define what object should be displayed “on top”. Define z-indexes for all elements in quest (only drop-down should also work I think).
EDIT (based on provided code):
The element to give the z-index property to is “the topmost element with a position attribute that the overlapped div is not part of. In terms of your sample, give the z-index to menu_container or add it to header and give header
position: relative(I like the latter option better because it is less likely to break with future changes of your html).As for an explanation why this is so, in IE6 and IE7 things work as follows: currently absolute_div is above everything inside menu_container, but menu_container is below relative_div, so absolute_div is too. The reason that header doesn’t participate in this story is that if no position attribute is given, what is displayed in front and what is in the back is calculated differently.