如何让wheel-display-overlay覆盖整个按钮并在hover时浮于图片上方

问题原因 #

• 现有.wheel-display-overlay使用position: relative定位，仍会占据正常文档流，自然排在图片、.wheel-display-base元素的下方，无法实现悬浮覆盖效果
• 父级按钮wheel-display-button未设置定位上下文，无法作为子元素绝对定位的尺寸参照
• 原有代码存在语法错误，也可能导致渲染异常：CSS中background: black后缺少分号，HTML中button标签未闭合、overlay的结束span标签漏写斜杠

修改后的完整代码 #

CSS代码 #

/* 父容器新增relative作为定位上下文 */
button.wheel-display-button {
  background-color: white;
  background-size: cover;
  border-color: black;
  display: inline-block;
  height: 400px;
  padding: 0px;
  width: 20%;
  position: relative;
  overflow: hidden;
}

button.wheel-display-button:hover .wheel-display-base {
  display: none;
}

button.wheel-display-button .wheel-display-overlay {
  display: none;
}

/* 修改overlay的定位规则 */
button.wheel-display-button:hover .wheel-display-overlay {
  background: black;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  z-index: 10;
}

HTML代码（修复语法错误） #

<button class="wheel-display-button">
  <img src="variant.image" alt="产品图">
  <span class="wheel-display-base">        
    <p>Brand</p>
  </span>
  <span class="wheel-display-overlay">
    <p>Model</p>
    <p>Size</p>
  </span>
</button>

核心修改说明 #

1. 给父级按钮加position: relative，作为子元素绝对定位的参照，让overlay的100%宽高可以和按钮尺寸完全匹配
2. 把overlay的定位改成position: absolute，加上top:0;left:0脱离正常文档流，直接贴合按钮左上角，不会再排在图片下方
3. 新增z-index: 10确保overlay层级高于按钮内的图片、base文本等其他元素
4. 修复原有代码的语法问题，避免渲染异常

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