javascript、css、z索引、div堆栈_Javascript_Css_Html_Z Index

javascript、css、z索引、div堆栈

javascript css html

javascript、css、z索引、div堆栈,javascript,css,html,z-index,Javascript,Css,Html,Z Index,我想创建一种只作用于页面中单个DIV的轻/厚框。当我的第一个div（phantom_back）启动时，它会按照我的要求运行，但是第二个div，phantom_top会在phantom_back之后设置它自己，而不管它的z索引和位置如何我做错了什么以下是我到目前为止的情况： <html> <head> <script type="text/javascript"> <!--// function phantom_bac

我想创建一种只作用于页面中单个DIV的轻/厚框。当我的第一个div（phantom_back）启动时，它会按照我的要求运行，但是第二个div，phantom_top会在phantom_back之后设置它自己，而不管它的z索引和位置如何

我做错了什么

以下是我到目前为止的情况：

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


asdf

我一直在想，为什么我找到的教程中没有一本提供类似的内容。

幻影顶部设置为位置：相对而非绝对，因此它当前没有与幻影背面重叠。

因此，我得到了它。我在phantom_背面设置了一个绝对位置，而不是尝试重新标记它们，我只是设置了可见性。当我试图设置z指数时，它会在我身上崩溃

<html>
<head>
    <script type="text/javascript">
    <!--//
        function phantom_back(image)
            {
                document.getElementById('phantom_back').style.height = 700;
                document.getElementById('phantom_back').style.width = 700;
                document.getElementById('phantom_back').style.zIndex = 50;
                phantom_top();
            }

        function phantom_top()
            {
                document.getElementById('phantom_top').style.height = 600;
                document.getElementById('phantom_top').style.width = 600;
                document.getElementById('phantom_top').style.visibility = "visible";
            }
    //-->
    </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: absolute; 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="margin: 0 auto; text-align: center; height: 10px; width: 10px;  position: relative; z-index: 102; top: 10px; background-color: white; visibility: hidden;" id="phantom_top"><br /><br /><img src="load.gif"></div>
    </div>

</body>
</html>

别忘了连接px字符串的高度和宽度。z索引不需要px

document.getElementById('phantom_back').style.height = 700 + "px";

就像那样。

我接到一个电话，要找phantom_back底部的phantom_top。我是不是做错了什么？