html - ul 的绝对定位如何导致表格中的按钮重叠？

Question

不确定这是否真的与表格相关，但我有一个弹出窗口与下一个表格行中的按钮元素重叠。

我试过:
1) 在弹出窗口中设置我的 z-index 为 ul 20000
2) 使重叠按钮具有与 z-index
的相对位置3) 在每个表行上设置特定的相对位置和 z-index
4) 删除除弹出窗口之外的所有定位
5) 使 li 的 z-index 大于按钮...
6) 以及以上的组合

具有 border-collapse: separate; 的表格是否存在错误？
7) 删除​​表格边框折叠:分开；
8) 移除表格布局:修复；
9) 检查表格是否使用了z-index或定位

无法解决这个小问题。我的按钮上没有设置任何 z-index 或位置。它们是 display: inline-block; 有一些边距。我无法在网站的其他地方复制它。

CSS:

/* POPUPS */
.list-popup {/* this class is on the button */
    position: relative;
    z-index: 20;
}
.list-popup ul {
    position: absolute;
    width: 200px;
    top: 30px;
    right: 0;
    display: none;
    background: #FFFFFF;
    opacity: 1;
    z-index: 1000;
}
.list-popup ul li{
    width: 200px;
    list-style: none;
    background-color: #FFFFFF;
    text-align: left;
    padding: 20px;
}

编辑: Here is a fiddle of it working- 将弹出类中的 z-index 从 0 更改为 10，您可以看到差异。如上所述，我无法在应用程序的其他地方重现这一点。我检查了对可能影响 z-index 的其他类的引用，但没有找到。

Answer 1

尝试:

/* POPUPS */
.list-popup {/* this class is on the button */
position: relative;
z-index: -2;