Forums

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.


<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"> 
<title>Test div z-index</title>
<script type=\"text/javascript\">
<!--
    function tglVis (identifier) {
        var element = document.getElementById(identifier);
        if (element.style.visibility == 'hidden') {
            element.style.visibility='visible';
            element.style.display='block';
        } else {
            element.style.visibility='hidden';
            element.style.display='none';            
        }
    }
-->    
</script>
<style type=\"text/css\">
    *                   { margin: 0; padding: 0; }
    
    div#page-wrap       { position: absolute; left: 10px; top: 10px; width: 410px; height: 220px; border: 1px solid black; z-index: 1; }
    
    div#content-wrap    { position: relative; border: 1px dotted navy; left: 10px; top: 10px; width: 390px; height: 200px; z-index: 5;}
    div.content         { position: relative; float: left; width: 180px; height: 180px; left: 10px; top: 10px; border: 3px solid red; z-index: 10;}
    
    input.boxopener     { font-size: 10px; background: #eee; border: 1px solid #f90; position: absolute; top: 30px; left: 5px; z-index: 10; } 
    
    .box                { border: 3px dashed green; background: #000; color: #fff; z-index: 50; }
    div#box1            { position: absolute; width: 140px; height: 40px; left: 200px; top: 0px; }
    div#box2            { position: absolute; width: 140px; height: 40px; left: -180px; top: 0px; }
</style>
</head>
<body>
    <div id=\"page-wrap\">
        <div id=\"content-wrap\">
            <div class=\"content\">
                <input type=\"text\" class=\"boxopener\" value=\"Show box1\" onclick=\"tglVis('box1');\">
                <div id=\"box1\" class=\"box\" style=\"visibility: hidden; display: none;\">
                    Box 1 content
                </div>
            </div>
            <div class=\"content\">
                <input type=\"text\" class=\"boxopener\" value=\"Show box2\" onclick=\"tglVis('box2');\">
                <div id=\"box2\" class=\"box\" style=\"visibility: hidden; display: none;\">
                    Box 2 content
                </div>
            </div>
        </div>
    </div>
</body>
</html>

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:


    <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
    <html>
    <head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\">
    <title>Test div z-index</title>
    <script type=\"text/javascript\">
    <!--
        function tglVis (identifier) {
            var element = document.getElementById(identifier);
            if (element.style.visibility == 'hidden') {
                element.style.visibility='visible';
                element.style.display='block';
            } else {
                element.style.visibility='hidden';
                element.style.display='none';           
            }
        }
    -->   
    </script>
    <style type=\"text/css\">
        *                   { margin: 0; padding: 0; }
       
        div#page-wrap       { position: absolute; left: 10px; top: 10px; width: 410px; height: 220px; border: 1px solid black; z-index: 1; }
       
        div#content-wrap    { position: relative; border: 1px dotted navy; left: 10px; top: 10px; width: 390px; height: 200px; z-index: 1;}
        div.content         { position: relative; float: left; width: 180px; height: 180px; left: 10px; top: 10px; border: 3px solid red; z-index: 2;}
       
        input.boxopener     { font-size: 10px; background: #eee; border: 1px solid #f90; position: absolute; top: 30px; left: 5px; z-index: 2; }
       
        .box                { border: 3px dashed green; background: #000; color: #fff; z-index: 1; }
        div#box1            { position: absolute; width: 140px; height: 40px; left: 200px; top: 0px; z-index:1;}
        div#box2            { position: absolute; width: 140px; height: 40px; left: -180px; top: 0px; z-index:1;}
				div#box3            { position: absolute; width: 140px; height: 40px; left: 0px; top: 0px; z-index:2;}
    </style>
    </head>
    <body>
        <div id=\"page-wrap\">
            <div id=\"content-wrap\">
                <div class=\"content\">
										<div id=\"box3\" class=\"box\" style=\"visibility: hidden; display: none;\">
											Box 3 content
										</div>
                    <input type=\"text\" class=\"boxopener\" value=\"Show box1\" onclick=\"tglVis('box1');\">
                    <div id=\"box1\" class=\"box\" style=\"visibility: hidden; display: none;\">
                        Box 1 content
                    </div>
                </div>
                <div class=\"content\">
                    <input type=\"text\" class=\"boxopener\" value=\"Show box2\" onclick=\"tglVis('box3');\">
                    <!-- <div id=\"box2\" class=\"box\" style=\"visibility: hidden; display: none;\">
                        Box 2 content
                    </div> -->
                </div>
            </div>
        </div>
    </body>
    </html>

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.

treehouse : what would you like to learn today?

Forums

z-index strange behavoir