z-index strange behavoir

[jocke76]

Hi all

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".

Notes:
* 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:

Box 1 content

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…

Regards

Jocke, Sweden.

[frujo]

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:

Box 3 content

Box 1 content

I hope it will help you a bit.

[jocke76]

Hey

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.

[Author]

Posts