I have 3 divs. 2 of them are pictures, one on the left, other on the right. 3rd div is a text, wich i want to place UNDER left picture and OVER right picture! div "left" is relative (z-index: 3 div "right" is relative (z-index: 1 div "text" is absolute (z-index: 2 This z-index positioning works just fine in IE and FF, but not in opera, which puts the text div over both pictures. What am I supposed to do! Help appriciated!
My guess is that it has everything to do with the position:absolute. I've had some issues with Opera incorrectly indexing elements that weren't consistantly as well. Post the code, or a url and I'll have a look at it. Until then, you might try ratcheting the indexes further apart.
The elements have to be block elements to recieve a z-index attribute. You might try assigning display:block to all three elements to make sure. Also any contents of the relative divs should also be marked as relative. Ensure you are using a fully qualified DOCTYPE otherwise the behaviour in Opera is undefined. Opera (unlike the other two) does not have a quirks mode.
Not true. Any elements with positional reference is subject to z-index, but you must understand how the stacking order model works. Consider this: span { position: relative; } .first { z-index: 1; color: white; background-color: red; } .second { z-index: 1; color: white; background-color: blue; left: -3em; } =========== <p><span class="first">first span</span> <span class="second span">second span</span></p> Code (markup): The second span, an inline element, will overlap the first. Now raise the z-index of the first. Not true. Where did you get that idea? Not true. See Opera 7 and 8 Doctype Switches I understand you're trying to help, but at least try to get the facts correct. cheers, gary
ok, i have made just a simple example: html: <div id="float-wrapper"> <div id="left"> <div class="leftContent"> </div> </div> <div id="right"> <div id="rightContent"> <h1>center</h1> </div> </div> </div> css: #float-wrapper { float: left; width: 300px; padding: 0px; margin: 0px; } #left { float: left; width: 100px; height: 200px; padding: 0px; margin: 0px; } .leftContent { width: 100px; height: 200px; text-align: left; background: url(red.gif) no-repeat left top; float: left; position: relative; z-index: 3; padding: 0px; margin: 0px; } #right { float: right; width: 200px; height: 200px; padding: 0px; margin: 0px; } #rightContent { width: 200px; height: 200px; background: url(blue.gif) no-repeat left top; padding: 0px; margin: 0px; float: left; position: relative; z-index: 1; } #rightContent h1 { color: #ffffff; font-size: 40px; padding: 0px; margin: 0px; float: left; padding: 0px; margin: 30px 0px 0px -40px; position: absolute; z-index: 2; } I noticed this problem to appear if pictures are used as background so make two simple gifs (somehow i didnt managed to attach them). I would like that text appears under left picture and over right one!
I'm sure Gary can chime in on this one much better than I, but I can't imagine you're going about achieving the desired result the most efficient way. Can you post a screenshot of what you're trying to achieve?
Damn you Greg-J. It's hard to pass a dare. First was to simplify, make a minimal test case to find the actual culprit. Assume standards mode. <body> <div id="wrapper"> <div id="left"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed euismod semper urna. Duis id elit sit amet tellus rutrum aliquet. Phasellus sollicitudin laoreet augue. Sed.</p> </div> <div id="right"> <h1>center</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed euismod semper urna. Duis id elit sit amet tellus rutrum aliquet. Phasellus sollicitudin laoreet augue. Sed.</p> </div> </div> </body> Code (markup): The works-as-desired css was #wrapper { position: relative; background-color: #ffe; width: 325px; height: 400px; padding: 5px; } #left { z-index: 3; position: absolute; top: 5px; left: 5px; width: 150px; padding: 5px; background-color: #fee; } #right { z-index: 2; background-color: #eef; position: absolute; top: 5px; right: 5px; width: 150px; padding: 5px; } h1 { color: black; background-color: #efe; top: 0; left: -40px; position: absolute; } Code (markup): And, the doesn't work css #left { z-index: 3; position: relative; float: left; width: 150px; padding: 5px; background-color: #fee; } Code (markup): So the issue is z-index on a float, even a relative positioned float. A search of the Opera forums and its bug tracking site did not turn up anything, probably due to nothing recent being there. A Google search, and Google is, indeed, your friend, returned floats: layering with Opera-fix. You can find Georg over on the css-discuss mail list. So, anyway, it is a bug in Opera that is apparently fixed in v.9., and Georg has a work-around for right now. cheers, gary