Question

60

javascript, css, z-index, div stacking

rated 0 times [ 66] [ 6] / answers: 1 / hits: 28733 / 16 Years ago, mon, february 9, 2009, 12:00:00

I want to create a sort of light/thick box that only acts on a single DIV within a page.
When mine fires off the first div(phantom_back) acts as I want it but the second, phantom_top sets its self after phantom_back regardless of its z-index and positioning.

What am I doing wrong?

Here is what I have so far:

<html>

<head>

    <script type=text/javascript>

    <!--//

        function phantom_back(image)

        {

            document.getElementById('phantom_back').style.zIndex = 100;

            document.getElementById('phantom_back').style.height = '100%';

            document.getElementById('phantom_back').style.width = '100%';

            phantom_top();

        }



        function phantom_top(image)

        {

            document.getElementById('phantom_top').style.zIndex = 102;

            document.getElementById('phantom_top').style.height = 600;

            document.getElementById('phantom_top').style.width = 600;

            document.getElementById('phantom_top').style.top = 0;

            document.getElementById('phantom_top').style.left = 0;

        }

    //-->

    </script>

</head>

<body>

    <a href=# onclick=phantom_back()>Change</a>



    <div style=height: 700px; width: 700px; border: 2px black solid; margin:0 auto; background-color: red; id=overlord>

        <div style=height: 10px; width: 10px; position: relative; z-index: -1; background-color: #000000; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; id=phantom_back></div>



        <div style=height: 10px; width: 10px; position: relative; z-index: -3; margin: 0 auto; background-color: green; id=phantom_top>asdf</div>

    </div>



</body>

</html>