对特定 div 元素实施 z-index

Question

大家好，我想放置 z-index 以确保 "Event today" 位于元素后面（折叠）。下面是我的代码....

    <div id="infobox" class="collapse"  >
                <table id="attacks" class="display" cellspacing="0" width="100%"  >
                    <thead style="z-index:10">
                        <tr>
                            <th>Time</th>
                            <th>Attacker</th>
                            <th>Target</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>Time</th>
                            <th>Attacker</th>
                            <th>Target</th>
                        </tr>
                    </tfoot>
                </table>
            </div>

<div class="toolbar-left2 noselect" >
        <table>
            <tr>
                <td style="color:white;background-color:#000000;">Events Today: <font></font></td>
                <td id="totalattack" style="color:white;background-color:#000000;">0      </td>
                <td align="right"id="todaytime" style="color:white;background-color:#000000;">Current Time</td>
            </tr>
        </table>
    </div>

我的问题是如何确保时钟元素在包含 class 崩溃的元素后面...请帮助我谢谢。

Answer 1

您的 z-index: -10 确实使您的元素出现在其他元素后面。

只有 'positioned' 的内容，例如 position: absolute, position: fixed or position: relative 才会尊重 z-index。请注意，默认 position: static 而不是 服从 z-index.

此外，请记住默认的 z-index 是 0。尽管您的元素 看起来 位于 <body> 和 <html> 等元素之上，但它实际上 落后于 他们。

这是一个工作示例，展示了您的元素隐藏在红色方块后面：

#sample {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background: red;
}

<div class="toolbar-left2 noselect" style="z-index:-10">
  <table>
    <tr>
      <td style="color:white;background-color:#000000;">Events Today:
        <font></font>
      </td>
      <td id="totalattack" style="color:white;background-color:#000000;">0 </td>
      <td align="right" id="todaytime" style="color:white;background-color:#000000;">Current Time</td>
    </tr>
  </table>
</div>

<div id="sample"></div>

在您的示例中，您需要向 .collapse 和 .noselect 添加 position，并确保给 .collapse 更高的 [=18] =] 比 .noselect。在以下示例中，我还将文本更改为红色以帮助说明这一点：

.collapse {
  position: relative;
  z-index: 10;
  color: red;
}

.noselect {
  position: absolute;
  top: 0;
  left: 0;
}

<div id="infobox" class="collapse">
  <table id="attacks" class="display" cellspacing="0" width="100%">
    <thead style="z-index:10">
      <tr>
        <th>Time</th>
        <th>Attacker</th>
        <th>Target</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <th>Time</th>
        <th>Attacker</th>
        <th>Target</th>
      </tr>
    </tfoot>
  </table>
</div>

<div class="toolbar-left2 noselect">
  <table>
    <tr>
      <td style="color:white;background-color:#000000;">Events Today:
        <font></font>
      </td>
      <td id="totalattack" style="color:white;background-color:#000000;">0 </td>
      <td align="right" id="todaytime" style="color:white;background-color:#000000;">Current Time</td>
    </tr>
  </table>
</div>

希望对您有所帮助！ :)

Answer 2

An element with a larger z-index generally covers an element with a lower one.

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

默认情况下，html和body的z-index为0。只设置一个元素的z-index为负数时，甚至会落后于html和body.

如果您在 html and/or body 上设置的背景会用负数 z-index 覆盖您的元素，那么您可以删除背景验证该元素实际上位于 html 和 body.

之后

注意：z-index 属性对静态定位元素没有影响。

对特定 div 元素实施 z-index

Implement z-index to the particular div element

html

css

z-index