The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS z-index strange behavoir

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #23999

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

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


    Test div z-index

    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.


    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:


    Test div z-index

    I hope it will help you a bit.



    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)
  • The forum ‘CSS’ is closed to new topics and replies.