Z-индекс не работает должным образом: стек данных и скрытие - PullRequest
Новая
       0

Z-индекс не работает должным образом: стек данных и скрытие

0 голосов
/ 24 января 2012

код ниже демонстрирует, что я пытаюсь сделать.почему мой div "blackOut" появляется перед моим div "theGoods"?разве z-индекс не должен правильно обрабатывать это? 

    <html>

    <head>
        <style>
            table.theGoods{
                display:block;
                z-index:20;
                background-color:yellow;
                font-family:arial;
                font-size:18px;
                width:300px;
                height:300px;
                margin-right:auto;
                margin-left:auto;
                margin-top:180px;
                text-align:center;

            }


            div.blackOut{
                position:absolute;
                background-color:red;
                width:100%;
                height:100%;
                padding:0px;
                top:0px;
                left:0px;
                z-index:2;

            }

            div.behindIt{
                z-index:1;  
                background-color:red;
            }

            #myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }



        </style>
    </head>

        <body>
            <table class="theGoods" id="theGoods">
                <tr>
                    <th>
                        la la
                    </th>
                </tr>
            </table>

            <div class="blackOut" id="blackOut" onClick="myHider(event)"></div>

        </body>
    <script>

        function myHider(e){
                document.getElementById("blackOut").style.display="none";
        }

    </script>

    </html>

Ответы [ 4 ]

2 голосов
/ 24 января 2012

z-index:20; не действует без position:absolute или position:relative. (Вы хотите последнее.)

2 голосов
/ 24 января 2012

z-index влияет только на элементы со свойством position, отличным от «static». Если вы добавите position:relative; в table.theGoods, у вас все будет хорошо. Как правило, все элементы, участвующие в укладке, должны иметь положение: относительное или положение: абсолютное.

0 голосов
/ 24 января 2012

Вам необходимо добавить «position: absolute;» к стилю для стола. Товары.

0 голосов
/ 24 января 2012

Вы не можете использовать z-index без использования: 

position:absolute;

или: 

position:relative;

, чего нет в таблице. TheGoods

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

Похожие темы

...