如何在表格中正确放置粘性 td 元素

Posted 2023-03-06

【中文标题】如何在表格中正确放置粘性 td 元素

【英文标题】：How to correctly place sticky td element in table

【发布时间】：2020-12-02 07:12:57

【问题描述】：

在表格的末尾（最后一个 td）我有一个按钮，它显示带有附加选项的弹出窗口。我希望这个 td/按钮位于行尾，但是当屏幕很小时（出现 X 轴滚动）我希望它停留在表格可见部分的末尾。我通过将这些样式放入 td 来做到这一点：

td 
  position: sticky;
  right:0

它起作用了，但是现在如果您将弹出窗口（单击后出现）悬停在特殊区域（在同一按钮上方，但从另一行），窗口就会消失。我尝试将 z-index 添加到弹出窗口，但它不起作用。有谁知道如何修复它，或者我应该使用不同的样式来定位 td/button？ 弹出菜单： 消失前一刻：

【参考方案1】：

试试 margin-top:-5px 。或尝试将父级添加到您的元素并将您的样式转移到父级。比孩子你必须添加位置：相对和顶部：-5px

【参考方案2】：

只需尝试 td 的 z-index 0 或 -1。我希望它能正常工作。

td 
  position: sticky;
  right:0;
  z-index: 0; //or below one
  z-index: -1;