Html and CSS index z in IE8

Question

I have a question regarding the z-index problem with internet explore 8 . I have a main container and there are several divs inside it. My problem is that I use javascript to create new divs on top of my child divs inside the main container. For some reason, the main border of a div is only the top of the newly created div , even if the main container of the z-index div is 1. To be more clear, it looks like this: IE8 :

  ---- | | <--newly created div generated by js ----------------- | | | | | ---- | | | | | ----------------- 

desired result.

  ---- | | <--newly created div generated by js --------| |--- | | | | | ---- | | | | | ----------------- 

My html

 <div id='container'> <div> <a href='#'/> //hover to a will generate a new div. //before hover <a href='#'> // <- after hover to the link <div id='newDiv'> contents.... </div> </a> </div> </div> 

CSS

 #container{ background-color: #FFFFFF; border: 1px solid #364B78; position: relative; padding: 10px; clear: both; min-height: 200px; z-index: 1; } #newDiv{ position: absolute; background-color: red; top: -175px; left: 50px; width: 200px; height: 150px; z-index: 1000; padding: 8px; } 

This issue only occurs in IE8 and IE7. Are there any ways to solve this problem? Thank you very much!

EDIT

I just found out that the problem is actually related to the background image of the div in my div container

 <div id='container'> <div> <a href='#'/> //hover to a will generate a new div. //before hover <a href='#'> // <- after hover to the link <div id='newDiv'> contents.... </div> </a> <div id='border'></div> //this is the problematic div </div> </div> css #border { position:absolute; top:0px; left:0px; height:4px; width:100%; background-image:url(/images/top.gif); //the top.gif is a 2px height and 100% width image which on top of the new div z-index: 1; } 

Answer 1

"# border" is in a different stacking context than #newDiv, but it is in the same stacking context of the parent #newDiv.

Set the position (relative or absolute) on the parent #newDiv and set its z index to be greater than the z-index by #border.

Answer 2

Try putting an empty div

 <div></div> 

After the problematic div.

http://www.sitepoint.com/fix-disappearing-absolute-position-element-ie/