表第一个固定列中菜单的位置（z-index）

Question

我无法在固定的第一列中显示菜单。我重用了我在 jsFiddle 上找到的一个很好的示例来创建一个具有固定第一个标题和列的表。它工作正常，但我在第一列的每个单元格内都有一个菜单，现在我看不到菜单，因为它与下一行重叠：

编辑：我使用了错误的示例。 看起来主要问题是 z-index 和 possition:relative 的组合。我将示例更新为两个版本：

1) 这是工作示例，如果菜单完全可见： https://jsfiddle.net/pescdoum/6/

但由于单元格内的相对div，div在第一个固定列的上方，请尝试向右滚动。

div.relPos {
  position:relative;
  border: 1px solid blue;
  background: yellow;
}

2) 因此，为了使其工作，我在第一个固定列中添加了一个 z-index，使其位于滚动区域上方： https://jsfiddle.net/pescdoum/8/

但由于这个原因，现在我的菜单又出现了问题。

ul {
  list-style: none url();
  padding: 0px;
  margin: 0px;
  border: 1px solid red;
  position: absolute;
  background: yellow;
  left: 0px;
  display: none;
  z-index: 50; /* This will not help if table td contains relative elements */ 
}

Answer 1

将ul 中的z-index 设置为11

ul {
    list-style: none url();
    padding: 0px;
    margin: 0px;
    border: 1px solid red;
    position: absolute;
    background: yellow;
    left: 0px;
    display: none;
    z-index: 11; //this line
}