Question

下面的代码演示了我想要做的事情。为什么我的＆＃34; blackOut＆＃34; div出现在我的＆＃34; theGoods＆＃34; DIV？ z-index不应该正确处理这个吗？

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

Answer 1

如果没有z-index:20;或position:absolute，

position:relative无效。（你想要这封信。）

Answer 2

z-index仅影响{static}以外的position属性的元素。如果你将position:relative;添加到table.theGoods，你应该没问题。通常，堆叠中涉及的所有元素都需要具有位置：相对或位置：绝对。

Answer 3

您无法使用z-index而不使用：

position:absolute;

或：

position:relative;

缺少table.theGoods

Answer 4

你需要添加“position：absolute;”对于table.theGoods的风格。

z-index表现不如预期：数据堆叠和隐藏

4 个答案: