JavaScript, CSS, Z-индекс, Div укладки - PullRequest
Новая
       13

JavaScript, CSS, Z-индекс, Div укладки

3 голосов
/ 09 февраля 2009

Я хочу создать своего рода светло-толстую коробку, которая будет действовать только на один 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>

Я бродил, почему ни один из учебных пособий, которые мне не удалось найти, не предлагал что-то вроде этого.

Ответы [ 3 ]

5 голосов
/ 09 февраля 2009

Итак, я понял. Я устанавливаю абсолютное позиционирование на 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>
0 голосов
/ 01 июля 2014

Не забудьте объединить строку px для высоты и ширины. Вам не нужен px для z-index 

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

Вот так.

0 голосов
/ 09 февраля 2009

phantom_top установлен в положение: относительный не абсолютный, поэтому в настоящее время он не перекрывает phantom_back.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...