Question

大家好我想把z-index放到今天的＆＃34;事件＆＃34;将在元素后面（崩溃）。这是我的代码....

var jsonObject= {
    level1 : [
        { id:123, level2 : 'abc'},
        { id:123, level2 : 'cde'}
    ]
}

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

Answer 1

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

只有“定位”的内容，例如 position: absolute ， position: fixed 或 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>

在您的示例中，您需要向position和.collapse添加.noselect，并确保.collapse更高z-index比.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

具有较大z-index的元素通常覆盖具有较低z-index的元素。

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

默认情况下，z-index和html的{{1}}为body。仅将元素的0设置为负数时，即使z-index和html也会落后。

如果您在body和/或html上设置了一个背景设置，可以用负body覆盖您的元素，那么您可以删除背景以验证事实上，元素位于z-index和html之后。

注意：body属性对静态定位的元素没有影响。

实现特定div元素的z-index

2 个答案: