javascript,css,z-index,div堆叠

2019-10-24 15:36:21 阅读：177 来源： 互联网

我想创建一种仅在页面内的单个DIV上起作用的浅色/厚框.
当我的火花触发时,第一个div(phantom_back)会按照我的期望运行,但第二个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>

我一直在徘徊,为什么我找不到的所有教程都提供这样的东西.

解决方法:

所以,我明白了.我在phantom_back上设置了绝对位置,而没有尝试重新堆叠它们,而是设置了可见性.当我尝试设置z-index时,它会崩溃.

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

标签：z-index,css,html,javascript
来源： https://codeday.me/bug/20191024/1921574.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript,css,z-index,div堆叠