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.
Would be really gratefull if someone could solve this for me.
I’ve been banging my head against the wall for hours now…
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:
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.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".