JavaScript, CSS, Z-Index, Div Stacking

StackOverflow https://stackoverflow.com/questions/529407

  •  22-08-2019
  •  | 
  •  

문제

페이지 내에서 단일 DIV에서만 작용하는 일종의 밝은/두꺼운 상자를 만들고 싶습니다. 광산이 첫 번째 div (phantom_back)에서 발사되면 내가 원하는대로 행동하지만 두 번째는 z-index 및 위치에 관계없이 Phantom_back 후에 자체를 설정합니다.

내가 뭘 잘못하고 있죠?

지금까지 내가 가지고있는 것은 다음과 같습니다.

<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- 인덱스를 설정하려고 할 때 그것은 나에게 떨어질 것입니다.

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

다른 팁

Phantom_top은 위치로 설정되어 있습니다. 상대적으로 절대적이지 않으므로 현재 Phantom_back이 겹치지 않습니다.

높이와 너비에 대해 PX 스트링을 연결하는 것을 잊지 마십시오. z-index 용 PX가 필요하지 않습니다

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

그렇게.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top