如何避免半透明按钮透显后方元素？z-index层级优先级调整咨询

解决方法 #

z-index仅对非static定位的元素生效，你当前两个层叠元素都使用默认的static定位，因此无法通过z-index调整层级。只需新增少量CSS属性即可解决，不需要修改任何原有颜色配置：

• 给.border添加position: relative和z-index: 0，激活层级控制能力，设置基础层级
• 给.order-button添加position: relative和z-index: 1，设置比边框更高的层级

修改后的完整CSS如下：

.border {
   border: 4px solid rgb(195, 0, 38);
   position: relative;
   z-index: 0;
}

.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;
  position: relative;
  z-index: 1;
}

position: relative不会改变元素原有的布局位置，只是开启z-index的生效条件。修改后半透明按钮层级高于边框，透出的将会是更底层的页面背景，不会透出红色边框，匹配预期效果。

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