如何在overflow:hidden场景下使用z-index解决按钮被遮挡问题

问题根源 #

• 绝对定位的.btn写在.container外部，无法以设置了position: relative的.container作为定位基准，层级规则下被设置了overflow: hidden的.container遮挡
• 带有position: relative的容器同时设置了overflow: hidden，如果按钮放在容器内部，超出容器范围的部分也会被直接裁剪
• 缺少水平居中偏移配置，仅设置left: 50%无法实现按钮真正水平居中

修复方案 #

调整HTML结构，拆分定位父容器和内容裁剪容器，额外添加渐变遮罩层实现过渡效果：

HTML代码 #

<div class="wrapper">
  <div class="content">
    <!-- 原有容器内的所有内容放在这里 -->
  </div>
  <!-- 渐变过渡遮罩 -->
  <div class="fade-mask"></div>
  <button class="btn">显示更多</button>
</div>

CSS代码 #

/* 外层定位父容器，不设置overflow，避免裁剪按钮 */
.wrapper {
  position: relative;
}
/* 内容容器，单独设置高度限制和溢出裁剪 */
.content {
  max-height: 16rem;
  overflow-y: hidden;
}
/* 渐变遮罩，实现内容到按钮的自然过渡 */
.fade-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4rem;
  /* 可根据实际背景色调整渐变参数 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 100%);
  pointer-events: none;
  z-index: 1;
}
.btn {
  position: absolute;
  bottom: -1em;
  left: 50%;
  /* 补充水平居中偏移 */
  transform: translateX(-50%);
  z-index: 2;
}

修复后即可实现渐变过渡+按钮悬浮在容器底部的预期效果，不会出现被遮挡的问题。

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