如何使用CSS实现容器边框显示在半透明禁用按钮后方

问题原因 #

z-index 属性仅对设置了非static定位（relative/absolute/fixed等）的元素生效，你之前只调整z-index没有给元素加定位属性，所以层叠顺序设置不生效。

解决方案 #

仅需要给两个外层容器增加定位和层叠顺序配置即可，不需要修改现有颜色、也不影响按钮半透明的禁用效果：

.border {
   border: 4px solid rgb(195, 0, 38);
   border-bottom: transparent;
   /* 新增2行配置 */
   position: relative;
   z-index: 1;
}

.info-card {
  padding-bottom: 20px;
}

button {
  background-color: rgb(195, 0, 38);
  opacity: 0.5;
  border-radius: 10px;
  color: #fff;
  padding: 5px;
}

.order-button {
  margin-top: -1.5rem;
  /* 新增2行配置 */
  position: relative;
  z-index: 2;
}

HTML代码可保持原样，也可给按钮增加disabled属性增强语义化：

<div class="border">
<div class="info-card">
  <h1> Info Section </h1>
</div>
</div>
<div class="order-button">
   <button disabled>
      Order Now
   </button>
</div>

效果说明 #

调整后.order-button层叠顺序高于.border容器，按钮会完整覆盖在边框上方，不会被边框遮挡。由于按钮和边框颜色完全一致，半透明按钮透出下方同色边框不会产生视觉差异，完全符合需求。

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