CSS为什么表边框出现在子绝对定位元素中？

Question

我的主要目标是使用focus元素进行弹出操作。但似乎表格边框出现在动作框中，即使动作框没有透明属性。显示在下面的红框图片中。我希望操作框完全位于表格元素的顶部，因此表格边框在操作框中不可见。我试图在动作框上使用z-index，但它不起作用。

这是我的行动框代码

.action {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  min-width: 120px;
  top: 5px;
  right: 10px;
  padding-top: 0;
  padding-bottom: 0;
  text-align: left;
  background-color: #fff;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2), 0 3px 15px 0 rgba(0, 0, 0, 0.19);
  -webkit-transition: visibility 0s, opacity 200ms linear;
  -ms-transition: visibility 0s, opacity 200ms linear;
  transition: visibility 0s, opacity 200ms linear;
}

.action ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.action ul li {
  height: 44px;
  padding-left: 22px;
  padding-right: 22px;
}

.action ul li a {
  line-height: 44px;
}

.action ul li:hover {
  background-color: #f7f4f4;
  cursor: pointer;
}

.action-control:hover {
  cursor: pointer;
}

.action-control:focus {
  outline: none;
}

.action-control:focus+.action {
  visibility: visible;
  opacity: 1;
  z-index: 3;
}

<table>
  <tr>
    <td style="text-align: center">
      <span style="position: relative">
        <a tabindex="0" class="action-control"><i class="fa fa-ellipsis-v"></i></a>
        <div class="action">
          <ul>
            <li><a class="text-menu">Edit</a></li>
            <li><a class="text-menu">Delete</a></li>
          </ul>
        </div>
      </span>
    </td>
  </tr>
</table>

我的css代码有什么问题吗？请帮我。 我认为这是一个微不足道的问题，但仍然可以通过自我解决。 这是jsfiddle

Answer 1

您的<tbody>元素已设置opacity: 0.84;。因此，它的所有孩子 - 包括你的人物 - 都处于不透明状态。不确定这是否是一个错误，或者你正试图用这个来完成某些事情。如果是后者，我建议使用rgba使用背景颜色来定位相关元素 - 这应该很容易被弹出窗口的background-color覆盖。