Grow your CSS skills. Land your dream job.

z-index strange behavoir

  • # January 20, 2009 at 8:09 am

    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:
    < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">




    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.

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




    I hope it will help you a bit.

    # January 21, 2009 at 7:46 am

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".