Forum Moderators: not2easy
I have a div that goes over a text box, but in IE the text box displays over the div.
Here is all the code necessary to reproduce the problem:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Z-Index Problem</title>
<style type="text/css">
<!--
.suggest_box
{
position: absolute;
top:23px;
left:0px;
margin:0px;
padding:0px;
z-index:1000;
background-color: #FFFFFF;
text-align: left;
border: 1px solid #000000;
overflow:scroll;
width:143px;
max-height:150px;
}
-->
</style>
</head>
<body>
<div class="section" style="width: 720px;">
<table id="topicsHolderTable" align="center" border="0" cellpadding="0" cellspacing="0">
<tbody id="topicsHolderTbody" >
<tr>
<th align="center">Topic</th>
</tr>
<tr id="topic_row_0">
<td align="center">
<div style="position: relative;">
<input style="position: relative;"
autocomplete="off"
value="PHP" name="topic_1" type="text" />
<div style="display:" class="suggest_box">
<div>
PHP<br />
AJAX<br />
JavaScript
</div>
</div>
</div>
</td>
</tr>
<tr id="topic_row_1">
<td align="center">
<div style="position: relative;">
<input style="position: relative;"
autocomplete="off"
value="XML" name="topic_2" type="text" />
<div style="display: none;" class="suggest_box"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
the problem being IE and position: relative;
positioned elements without a z-index are not supposed to create a new stacking context - so that second input should not appear over the top of the AP div - even if its z-index were 1.
I simplified the code to remove the complication of the table and I also replaced the input with a <p> - just for illustration and I also wanted to make sure the table/inputs weren't factors.
<div class="pr">
<p>hello 1</p>
<!--<input autocomplete="off" value="PHP" name="topic_1" type="text" />-->
<div class="suggest_box"><div>PHP<br />AJAX<br />JavaScript</div></div>
</div><div class="pr hidden">
<p>hello 2</p>
<!--<input autocomplete="off" value="XML" name="topic_2" type="text" />-->
<div class="suggest_box"><div>XML<br />HTML<br />RSS</div></div>
</div>
I've done some research into this problem before and have never quite been able to come up with a coherent rule of thumb..
basically in the code sample above the two divs [class="pr"] - if they are positioned relatively with NO z-index should be on the same z-index (layer) and the AP div [id=suggest_box"] with ANY z-index, should automatically appear above them both.
However, IE, inc IE7 seems to give the second (and likely subsequent) relatively positioned div a new stacking context - which means it will start on higher z-index (layer) than all previously positioned elements - that includes the AP element :o - So regardless of how high you make that AP's z-index IE will always place a following RP element over it. This is in violation of the recommendations!
This happens a lot in drop down menus but that is usually easier to fix as you can apply the RP to the :hover but that doesn't help here ;)
Sorry if the above is boring and you just want an answer, but I'm thinking out loud in the hope that it can help you see a different way to approach the effect you'd like to achieve.
I do have one solution but I'm not sure it will work for your application, I was kind of thinking that you were using something to toggle the display value of the suggest box , and am assuming that you won't want more than one suggest_box displayed at a time?
if that is the case you will see from my code above that I added the class "hidden" to the RP div rather than directly onto to suggest_box div - if you are to be doing some form of toggling you could toggle that class on and off..
using this class you could then change the positioning of the RP divs with hidden suggest_box divs to "static" as well as targeting and hiding the suggest_box inside them..
CSS: to go with my code above...suggest_box {
position: absolute;
top:23px;
left:0px;
margin:0;
padding:0;
z-index:1;
background-color: #fff;
border: 1px solid #000;
overflow:scroll;
width:143px;
max-height:150px;
}.pr {position: relative;}/*
.hidden {position: static;}
.hidden .suggest_box {display: none;}
*/p {background: #cfc;}
Uncomment the
.hiddennot sure if that's even remotely close what to what you want to do, but do let us know more info if you like.. it may be that more work can be done using RP indexes but again that's buggy in IE6 and below too so this could depend on the effect really.
Suzy
added to code: coloured background to <p> for easier visualisaton that it's on top!
[edited by: SuzyUK at 8:46 pm (utc) on May 11, 2007]
