为何opacity值小于1的元素会覆盖绝对定位弹出表格？如何解决？

原因 #

当元素设置opacity值小于1时，会强制创建一个新的堆叠上下文。这个堆叠上下文会将该元素及其所有子元素的层级范围锁定在自身内部，哪怕你的弹出表格是绝对定位，只要没主动创建更高优先级的堆叠上下文，就会被这个半透明元素所在的堆叠上下文覆盖。

解决方法 #

方法一：给弹出表格设置足够高的z-index #

直接为弹出表格添加一个足够大的z-index值，确保它在全局堆叠层级中处于更高位置：

.flyout-table {
  position: absolute;
  display: none;
  z-index: 9999; /* 添加高优先级层级 */
  /* 其他原有样式：背景、边框等 */
}

.title:hover + .flyout-table {
  display: block;
}

注意：如果弹出表格的父容器也设置了opacity<1、transform、filter等会创建堆叠上下文的属性，这个方法可能失效，此时需要用方法二。

方法二：将弹出表格移到根容器下 #

把弹出表格直接作为<body>的子元素，脱离原来可能存在的堆叠上下文限制，再配合z-index使用，就能确保它不会被其他元素遮挡：

<!-- 原嵌套结构（可能被半透明容器限制） -->
<div class="semi-transparent-box">
  <div class="title">悬停显示表格</div>
  <table class="flyout-table">...</table>
</div>

<!-- 修改后移到body下 -->
<div class="semi-transparent-box">
  <div class="title">悬停显示表格</div>
</div>
<table class="flyout-table">...</table>

若需要弹出表格跟随标题位置，可通过JS计算定位坐标，或用CSS的top/left手动指定位置。

内容的提问来源于stack exchange，提问作者Watchduck