为什么 `position:relative` 在 safari 和 opera 的 devtools 中被计算为 `position: static`？

Question

我创建了一个 html table 来显示每小时的时间表。在<tbody>标签中，我添加了一个<div>，画了一条代表当前时间的横线，用JS定位。它在 Chrome 和 Firefox 上运行得很好，因为时间线的位置很好。但不幸的是，它不适用于 Opera 或 Safari。

Safari 12.1.1 和 Opera 60.0.3255.170 会出现此问题。

以下是我的 html:

的摘录

<table>
  <thead>
    <tr>
      <th class="hour"></th>

      <th> John Steed </th>
      <th> Emma Peel </th>
    </tr>
  </thead>
  <tbody>
    <div class="time"></div>
    <tr>
      <td class="hour">9am</td>
      <td>Somme appointment</td>
      <td></td>
    </tr>
    <tr>
      <td class="hour">10am</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td class="hour">11am</td>
      <td></td>
      <td>Somme appointment</td>
    </tr>
    <tr>
      <td class="hour">12pm</td>
      <td>Somme appointment</td>
      <td>Somme appointment</td>
    </tr>
  </tbody>
</table>

这是我的 css:

table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;

  tbody {
    position: relative;

    .time {
      position: absolute;
      top: 0;
      height: 1px;
      width: 100%;
      color: #ff5722;
      background-color: #ff5722;

      &:before {
        content: 'Now';
      }

      &.hidden {
        display: none;
      }
    }

    tr {
      height: 109px;

      td {
        border-top: 1px #a8a8a8 dashed;
      }

      &:nth-of-type(2n) {
          background-color: #fafafa;
      }

      &:hover {
        background-color: #ededed;
      }
    }
  }

  th {
    padding: 1rem 25px;
    text-align: center;
    border-top: 1px #a8a8a8 solid;
    position: relative;
  }

  th, td {
    border-left: 1px #a8a8a8 solid;
    border-right: 1px #a8a8a8 solid;
    width: 200px;

    &.hour {
      width: 75px;
      padding-right: 1rem;
      vertical-align: top;
      border: none;
      text-align: right;
    }
  }
}

定位在我的 css 中被标记为相对的，但我注意到在 Opera 和 Safari 的开发工具中，尽管它在 "Styles" 中显示为 relative部分，在 "Computed" 中实际显示为 static。所以我的猜测是，出于某种原因， position 指令被简单地忽略了。但问题是我看不出任何原因...... 希望你们有一些想法:) 谢谢！！

Answer 1

感谢您的所有回答！我不得不找到另一种方法来解决它。事实上，div 作为 table 或 tbody 元素的直接子元素是错误的。所以最终，为了使其完全兼容，我不得不将它移出我的 table 并将其放入一个容器中。现在一切正常！

为什么 `position:relative` 在 safari 和 opera 的 devtools 中被计算为 `position: static`？

why is `position:relative` computed as `position: static` in devtools for safari and opera?

html

css

position

html-table

cross-browser