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

debugcn 发表于 Dev

特萨尔维贾亚

我的主要目标是制作一个带有焦点元素的弹出动作。但即使操作框没有透明度属性，表格边框似乎也出现在操作框中。如下图红框所示。我希望操作框完全位于表格元素的顶部，因此在操作框中看不到表格边框。我曾尝试在操作框上使用 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

亚历山大·尼德

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-07-11

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章

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

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

如何使顶部/底部边框出现在跨浏览器CSS的左侧/右侧边框的顶部

在 CSS Grid 项中定位元素

CSS 绝对定位表格中的表格

CSS - 在绝对定位元素后恢复正常的文档流

为什么某些 css 属性没有出现在我的母版页中？

纯 CSS：垂直和水平居中一个绝对定位元素，其宽度取决于子元素

CSS：不出现在Firefox中

CSS：不出现在Firefox中

显示表格-CSS，使成对的表格单元格出现在新行中

为什么CSS3右对齐的背景图像出现在错误的位置？

CSS 如何使 div 的子对象出现在中心？

CSS：为什么'top：0px'不能在相对定位的div中正确定位绝对定位的'p'元素？

CSS伪元素出现在内容上方

悬停后，css下拉菜单::子菜单出现在主菜单中

我的CSS文档出现在Head中，但未将任何样式绑定到元素

CSS悬停不适用于绝对定位元素的层次结构

更具体的CSS绝对定位元素不会覆盖先前设置的高度/宽度

CSS-受兄弟姐妹边际影响的绝对定位元素？

背景图像上的 CSS 绝对定位元素（响应式）

CSS布局挑战-浮动/定位元素

CSS“绝对”定位边框图像

css body 边框，绝对定位干扰

如何使CSS中的文本出现在垂直中间

CSS 属性未出现在文本输入中

CSS 打印 - 奇怪的工件仅出现在 Chrome 中

悬停时CSS边框出现问题

为什么在CSS中旋转的div的边框周围会出现模糊的边框？

父级和子级中的CSS绝对定位

如何防止绝对定位的元素在CSS列中损坏？