jonniejoejonson Posted August 31, 2010 Share Posted August 31, 2010 The following should produce a green square over the top of both a yellow stripe and an orange stripe. Please note this is not my actual problem but it is the principal cause of the problem i am having. In explorer the green square is positioned under the orange stripe.. this should not be so.. any ideas why?.. if i remove the position relative from the orange stripe it works... however i need the orange stripe to be position relative.... any ideas... Just saying Explorer is *beep* is not an acceptable answer!! even though it may be correct... <div style="position:relative; float:left; width:100%; height:100px; background:yellow;"> <div style="position:absolute; z-index:1000000; top:0; left:0; width:250px; height:250px; background:green;"></div> </div> <div style="position:relative; float:left; width:100%; height:100px; background:orange;"> </div> Quote Link to comment Share on other sites More sharing options...
jonniejoejonson Posted August 31, 2010 Author Share Posted August 31, 2010 answer you z-index on the relative positioned divs. well done me. Quote Link to comment Share on other sites More sharing options...
haku Posted September 1, 2010 Share Posted September 1, 2010 Internet explorer (you didn't mention which version by the way) has issues with the z-index. You have set the z-index on the child element (green), but the parent element (yellow) has the same z-index as it's sibling (orange). Since the sibling (orange) is later in the document, it takes a higher precedence than the element before it. As the parent (yellow) is relatively positioned, The z-index on the child (green) is only relevant to it's own siblings (siblings of the green, if any existed). The secret is to set a z-index of one on the parent (yellow) element. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.