CSS实现主卡片hover模糊时按钮不被连带模糊：z-index无效修复

之前操作失效的核心原因 #

当父元素.main-card本身应用filter属性时，浏览器会将该父元素及其所有嵌套子元素整体打包为一个独立的合成渲染层，父级设置的模糊效果会覆盖整个打包层的所有内容。
此时无论给按钮设置多高的z-index、多强的filter: blur(0)覆盖规则，都无法脱离这个被整体模糊的渲染层，之前的调整自然不会生效。

1. 调整DOM结构 #

将卡片内除按钮外的所有内容，全部移入一个新增的平级内容容器（例如.card-body），让按钮成为和内容容器互不嵌套的兄弟节点，从结构上让按钮脱离被模糊的元素范围。
调整后的HTML结构示例：

<div class="main-card">
  <!-- 独立于模糊层的按钮 -->
  <button class="rafflelink">Random Click</button>
  <!-- 承载全部需要模糊的卡片内容 -->
  <div class="card-body">
    <div class="header-card">Random Random Random</div>
    <div class="img-bg-card">
      <img class="img" src="">
    </div>
    <div class="progress-bar"></div>
    <div class="price-bar">
      <div class="price-left">Random Price:</div>
      <div class="price-right">1</div>
    </div>
    <div class="ticket-bar">
      <div class="ticket-left">Random Ticket:</div>
      <div class="ticket-right">10000</div>
    </div>
    <div class="date-bar">
      <div class="date-left">Random Date:</div>
      <div class="date-right">05/06/2021</div>
    </div>
  </div>
</div>

2. 调整对应CSS规则 #

• 把原本写在.main-card:hover上的模糊规则，迁移到专门的内容容器选择器上，仅对需要模糊的主体内容生效
• 保留.main-card的基础布局属性，给绝对定位的按钮提供稳定的定位参照
• 优化按钮的居中逻辑，避免布局错位
  调整后的核心CSS片段：

.main-card{
  width: 326px;
  height: 360px;
  background-color: white;
  border-radius: 15px;
  display: inline-grid;
  margin: 60px;
  padding-bottom: 21px;
  /* 给绝对定位的按钮提供定位参照 */
  position: relative;
}

/* 模糊效果仅作用于内部的内容容器，不会波及平级的按钮 */
.main-card:hover .card-body{
  filter: blur(1px);
  /* 兼容旧版Webkit内核浏览器可补充前缀 */
  -webkit-filter: blur(1px);
  border-radius: 15px;
}

.card-body{
  width: 100%;
  height: 100%;
}

.rafflelink{
  position: absolute;
  height: 50px;
  width: 200px;
  /* 稳定实现按钮在卡片内的居中效果 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.main-card:hover .rafflelink{
  opacity: 1;
}

这种结构下，模糊效果仅作用在专门的内容容器上，按钮作为平级的独立元素，从根源上不会被连带模糊，不需要通过复杂的层级对抗实现效果。

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