如何让元素显示在固定父元素后方？Logo轮廓置菜单背景后方案问询

嘿，我懂你的痛点——想把Logo轮廓放在菜单背景后面，但因为Logo本身是菜单列表项的一部分，常规的z-index调整完全不管用，试了各种方法都没效果对吧？别着急，咱们可以利用CSS层叠上下文的特性来解决这个问题，完全不需要JS。

核心思路 #

问题出在层叠上下文的范围上：如果你之前给.logo设置了position: relative或者z-index，那.contour的层级只会局限在.logo这个小容器里，就算设z-index: -1也只会在Logo内部“隐身”，根本到不了菜单背景的后面。

所以我们要做的是：让.contour的层叠上下文绑定到整个菜单容器（.menu），而不是Logo容器。

具体实现代码 #

首先保留你现有的HTML结构：

<div class="menu">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>
      <div class="logo">
        <div class="contour"></div>
      </div>
    </li>
    <li>Menu 3</li>
    <li>Menu 4</li>
  </ul>
</div>

然后添加以下CSS：

/* 给菜单容器创建基础层叠上下文，但不限制内部元素的层级突破 */
.menu {
  position: relative;
  background: #f0f0f0; /* 替换成你的菜单背景色 */
  /* 注意：不要设置overflow: hidden，否则轮廓会被裁剪 */
}

/* 关键：让Logo容器不要创建新的层叠上下文 */
.logo {
  position: static; /* 显式设置默认值，避免意外的relative/absolute */
  /* 不要加z-index，也不要加transform/opacity这些会创建层叠上下文的属性 */
  display: flex;
  align-items: center;
  justify-content: center;
  /* 这里可以添加Logo的尺寸、间距等样式 */
  width: 80px;
  height: 60px;
}

/* 把轮廓定位到菜单容器层级，放在背景后面 */
.contour {
  position: absolute;
  /* 让轮廓相对于菜单容器居中，也可根据需求调整位置 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 轮廓的尺寸和样式 */
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #ddd; /* 替换成你的轮廓颜色 */
  z-index: -1; /* 关键：把层级设为-1，落到菜单背景后面 */
}

为什么这个方案有效？ #

• .menu设置position: relative后，成为了内部绝对定位元素的参考容器，同时创建了一个层叠上下文，.contour的z-index: -1会让它落到这个上下文的底层，也就是菜单背景的后面。
• .logo保持position: static，不会创建新的层叠上下文，所以.contour的层级不会被限制在Logo内部，而是直接相对于.menu生效。

额外注意事项 #

• 如果菜单项（li）设置了z-index或者position: relative，可能会挡住轮廓，这时候给这些li设置z-index: 1，确保它们在轮廓上方，但又不会覆盖菜单背景。
• 如果菜单背景是给ul设置的，把.menu的样式移到ul上即可，逻辑完全一致。
• 调整.contour的top/left值可以精准控制位置，比如Logo不在菜单正中间时，用left: calc(50% + 20px)这样的计算值来偏移。

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