位置粘性在 Firefox 中有效，在 Chrome 中无效答案

【问题标题】：Position sticky works in Firefox, doesn't work in Chrome位置粘性在 Firefox 中有效，在 Chrome 中无效
【发布时间】：2019-07-12 09:42:57
【问题描述】：

我正在开发一个管理面板网站，并且我已将表格标题上的位置设置为粘性。它似乎在 Mozilla Firefox 中运行良好，但在 Chrome 中不起作用。我在前端使用 Materialize，在后端使用 Laravel。

我尝试将 .table-wrapper 的位置设置为相对，但它什么也没做。没有在任何元素上设置溢出或高度属性。

<table id="importuri-table" class="striped table-wrapper" res="înregistrarea">
    <thead>
      <tr>
        <th field="data">Data<i class="material-icons">sort</i></th>
        <th field="id">Nr. Fi<i class="material-icons">sort</i></th>
        <th field="status_plan">Status plan<i class="material-icons">sort</i></th>
        <th field="tip_transport">Tip trans<i class="material-icons">sort</i></th>
        <th field="transportator">Transportator<i class="material-icons">sort</i></th>
        <th field="autonr">Auto<i class="material-icons">sort</i></th>
        <th field="sofer">Sofer<i class="material-icons">sort</i></th>
        <th field="telefon">Telefon<i class="material-icons">sort</i></th>
        <th field="destinatie">Destinație<i class="material-icons">sort</i></th>
        <th field="valoare">Valoare<i class="material-icons">sort</i></th>
        <th field="valuta">Valuta<i class="material-icons">sort</i></th>
        <th width="200px">Actiuni</th>
      </tr>
      <tr>
        @for ($i = 0; $i < 11; $i++)
          <td>
            <div class="input-field">
              <input class="browser-default @if (in_array($i, [2, 3, 10])) autocomplete @endif" type="text" placeholder="Filtreaza dupa {{ ['dată', 'nr. FI', 'status plan', 'tip transport', 'transportator', 'nr. auto', 'șofer', 'telefon', 'destinație', 'valoare', 'valută'][$i] }}">
            </div>
          </td>
        @endfor

        <td><i class="material-icons blue-text resetfilter">autorenew</i></td>
      </tr>
    </thead>
    <tbody>
      @foreach ($importuri as $import)
        <tr>
          <td>{{ $import->data }}</td>
          <td>{{ $import->id }}</td>
          <td>{{ $import->status_plan }}</td>
          <td>{{ $import->tip_transport }}</td>
          <td>{{ $import->transportator }}</td>
          <td>{{ $import->autonr }}</td>
          <td>{{ $import->sofer }}</td>
          <td>{{ $import->telefon }}</td>
          <td>{{ $import->destinatie }}</td>
          <td>{{ $import->valoare }}</td>
          <td>{{ $import->valuta }}</td>
          <td>
            <a href="{{ route('importuri.edit', ['import' => $import->id]) }}"><i class="modal-trigger material-icons blue-text waves-effect waves-dark tooltipped" data-position="top" data-tooltip="Editează" href="#import-edit">edit</i></a>
            <i class="modal-trigger material-icons red-text waves-effect waves-dark tooltipped" data-position="top" data-tooltip="Șterge" href="#you-sure" action="{{ route('importuri.destroy', ['import' => $import->id]) }}">clear</i>
          </td>
        </tr>
      @endforeach
    </tbody>
  </table>

.table-wrapper {
  border: 1px solid #ddd;
  background-color: #fff;
  position: relative;

  > thead {
    background-color: #ddd;
    position: sticky;
    top: 0;
    z-index: 3;
  }
}

【问题讨论】：

标签： html laravel sass materialize positioning

【解决方案1】：

尝试将 position:sticky; 应用于 th 而不是 thead。示例：

.table-wrapper {
    border: 1px solid #ddd;
    background-color: #fff;
    position: relative;

    > thead {   
        th{
            background-color: #ddd;
            z-index: 3;
            position: sticky;
            top: 0;
        }
    }
}

【讨论】：

【解决方案2】：

我认为问题与您的任何父级有关，如回答here，如果父级具有溢出的任何属性：隐藏、滚动、自动，粘性值将不起作用，搜索导致此问题的父级属性，希望你把它修好

【讨论】：

根本没有溢出属性，我已经查看了整个 Scss 和谷歌检查。