z-index strange behavoir
# January 20, 2009 at 8:09 am
Really hard trying to explain this.. so i’m including code for testing..
Basically my problem is that box1 appears UNDER the input-field in the 2nd content-div.
I know that if I remove z-index from everything except the box-class, it solves the problem,
but since this example code isn’t really my problem .. in the real webapp I can’t remove
the z-index from everything before the "box:es".
* I can’t change the div-layout.
* I can’t show the boxes inside the "correct" div, they must show over the other..
* And, as said above, I can’t remove z-index from ‘wrapping’ divs. But I can change it.Code:< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Test div z-index
Box 2 content
Would be really gratefull if someone could solve this for me.
I’ve been banging my head against the wall for hours now…
Jocke, Sweden.# January 20, 2009 at 9:55 am
I don’t know how exactly solve your problem, but I know what causes it.
You see, div#box2 is laying lover in code (meaning "higher on generated page") than the input, which it should appear under. I made some test and created a third box which is above input and it works perfectly. Check here:Code:< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Test div z-index
Box 3 contentBox 1 content
I hope it will help you a bit.# January 21, 2009 at 7:46 am
Thank you, Frujo, for trying to help me out.
Actually I want the "box2-scenario", where box1 also places itself above the inputfield.
And I can’t re-arrange the code the way You did with box3. Everything is dynamic content.
What confuses me the most is that it works if I clear all z-index’s from the parent-elements.
But I kind of understood it had something to do with the order of the output.
Still I don’t think it’s correct .. box1 HAS a higher z-index than the everything inside the right div.Viewing 3 posts - 1 through 3 (of 3 total)
You must be logged in to reply to this topic.