table 内的绝对元素导致 table 启用 overflow-y: scroll somehow

Question

我有一个 table 提供一些服务。每项服务都有一个“？”图标，访问者可以单击该图标来阅读有关该服务的更多信息。

table 的包装有：

@media all and (max-width: 560px) {
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

因此您可以轻松地在移动设备上向右或向左滚动（因为 table 对于小屏幕来说太宽了）。

但这就是问题所在：一些弹出窗口（尤其是最后一个）导致 table 的包装器垂直滚动，而它没有 "overflow-y: scroll" !

由于弹出窗口，出现了一个滚动条，您可以在 table 内滚动...这不是我想要的 :( 因此，当您在移动设备上查看此 table 时，您无法再向下滚动页面，因为 table 挡住了。

这就是我想要的： 弹出窗口有 "z-index: 1;" 因此弹出窗口将位于几乎所有其他元素之上。所以弹出窗口也应该悬停在下面的元素上方（在 table 之外）。 table 高度应该基本上与其包装器相同，但弹出窗口需要能够越过此包装器（和 table）的边缘。由于它是 "position: absolute;"，我认为这是自动完成的，但事实并非如此。

更新：

非常难看的解决方案：将底部边距设置为 table 等于或大于最后一个和最高的弹出窗口，因此 table-wrapper 不需要垂直滚动条。但就像我说的：真的很丑。

见this fiddle

UPDATE（次要）: 我只在 table 较大时在包装器上设置 "overflow-x: auto"比屏幕大（约 560 像素），因此该问题不会显示在桌面上。

Answer 1

EDIT2 检查这个 jsFiddle 我认为它现在可以工作了:)

编辑

如果你想隐藏当屏幕 width 小于 560px 时显示的垂直滚动条，那么你可以简单地使用 overflow-y:hidden 禁用它并在以下其他元素上显示弹出窗口table 您可以在 @media 查询中设置 height:100%

@media all and (max-width: 560px) {
  .table-wrapper {
    overflow-x: auto;
    overflow-y:hidden;  // <-- 
    height:100%;        // <--
    -webkit-overflow-scrolling: touch;
  }
}

并且要在 table 之后隐藏 space 你不能将下一个元素设置为 negative margin-top 像这样

div_after_the_table {
margin-top:-75px;
}

Answer 2

如果您用 position: absolute; 将 table 包裹在另一个 div 中，弹出窗口将能够显示在溢出之外。

Answer 3

div .more-info {
    position: static;
}

绝对弹出窗口的直接父级必须定位 static 才能使其脱离 table 滚动。

我一直在处理同类问题，但我的问题仍未解决。我已将图标 position:absolute 设置为将其显示在第一列的右侧，而不将其换行到下一行。但是，当父级定位为静态时，使用图标进行弹出定位会出现问题。

在你的情况下，它会起作用。

table 内的绝对元素导致 table 启用 overflow-y: scroll somehow

Absolute element inside table is causing the table to enable overflow-y: scroll somehow

html

css

scroll

overflow

css-tables