Question

我的问题是粘性位置没有？当它在表格单元格中时在Safari中工作。有没有办法保留表格（第二栏设置侧边栏上的自动高度）并保持侧边栏内容在顶部？

＆＃13;

table {
    width: 100%;
    table-layout: fixed;
}
td{
    vertical-align: top;
}
.second {
    height: 3000px;
    background: #f00;
    width: 70%;
}
.sidebar div {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    height: 200px;
    background: #000;
}

＆＃13;

<table>
    <tr>
        <td class="sidebar">
            <div></div>
        </td>
        <td class="second"></td>
    </tr>
</table>

＆＃13;

Answer 1

问题似乎是Safari无法将display:table-cell元素识别为潜在的包含块。这可能是一个错误。

一种解决方法是将上下文div包裹在另一个display:block元素中，以使Safari成功为内部div建立包含块。

.table{
  height:1000px;
  width:200px;
}
.containing-block {
  height: 100%;
  border: 1px solid;
}
.text-content {
  position:-webkit-sticky;
  position:sticky;
  top:0;
  background:rgba(255,220,200,0.5);
 }

<table class="table">
  <tr>
    <td>
      <div class="containing-block">
        <div class="text-content">
          I'm first-child-sticky
        </div>
      </div>
    </td>
  </tr>
</table>

Safari位置粘在表格单元格中

1 个答案: