如何使按钮内的图片置于按钮下方并被部分覆盖

云上老周

2026-7-11

解决方案

问题核心在于图片是按钮的子元素，子元素的层级永远处于父元素的内容层之上，哪怕设置z-index也无法跑到父元素的背景下方。要实现按钮覆盖图片一部分、图片底部从按钮下方露出的效果，需要调整DOM结构和定位逻辑：

1. 调整HTML结构

把图片从按钮内部移出，放到<a>标签内与按钮同级，用容器包裹两者作为定位参考：

<a href="film.html">
  <div class="button-container">
    <button id="!01Hover" type="button" class="block link">
      <div id="!01HoverChild" class="hoverUp">FILM</div>
    </button>
    <img src="static/assets/logos/logoHOME1k.webp" id="!01HoverChildLogo" class="navbarLogo" onclick="location.href='./index.html'" alt="Logo">
  </div>
</a>

2. 修改CSS样式

给新增的容器设置position: relative，作为图片绝对定位的基准
按钮保留原有样式，确保z-index优先级高于图片
图片设置绝对定位，调整位置让按钮覆盖其顶部区域：

.button-container {
  position: relative;
  display: inline-block; /* 可根据整体布局需求改为block */
}

.block {
  /* 保留原有样式，确保z-index层级更高 */
  position: relative;
  z-index: 5;
  width: 10.6vw;
  height: 6vw;
  line-height: 1.5vw;
  border: none;
  background-color: #333;
  padding: 2.1vw 0;
  font-size: 1.275vw;
  cursor: pointer;
  color: #FFF;
  font-family: Roboto, sans-serif;
  text-decoration: none;
  transition: all 0.75s;
  font-weight: bold;
  filter: brightness(100%);
}

.hoverUp{
  transition: all 0.75s;
  transform: translateY(0vw);
  pointer-events: none;
}

.navbarLogo{
  position: absolute;
  bottom: -2vw; /* 调整此值控制图片露出的高度 */
  left: 50%;
  transform: translateX(-50%); /* 实现图片水平居中 */
  width: 80%;
  height: auto;
  z-index: 1;
  transition: all 0.75s;
}