17370845950

当使用 `z-index` 控制层叠顺序却无效时，根本原因通常是元素未脱离普通文档流或未建立定位上下文；为 `.circle2` 添加 `position: relative` 即可激活 `z-index` 并确保其显示在最上层。

在 CSS 中，z-index 仅对定位元素（即 position 值为 relative、absolute、fixed 或 sticky 的元素）生效。虽然你已为 .circle2 设置了 z-index: 99，但其默认 position: static（所有元素的初始值），导致 z-index 被完全忽略——这也是为什么左侧的 .circle1 看似“正常”（实则也未参与层叠比较，仅因浮动顺序和渲染流偶然前置），而右侧圆圈却被后续内容或父容器裁剪/覆盖。

✅ 正确解法：为 .circle2 显式声明 position: relative（无需改变布局位置，仅启用层叠上下文）：

.circle2 {
  position: relative; /* ✅ 关键修复：激活 z-index */
  z-index: 99;
  float: right;
  margin: 13em -5em;
  width: 20em;
  height: 20em;
  border-radius: 100%;
  border: solid 0.8em black;
  box-shadow: 0 0 0 0.5em white;
  outline-offset: 5em;
  outline: solid 0.1em rgb(181, 181, 181);
  background-image: url("images/2.png");
  background-size: cover;
}

⚠️ 注意事项：

• 不要仅依赖 float 实现定位：浮动元素仍处于普通流中，z-index 对其无效；
• 避免在旋转容器（如 .wrapper 和 .outer-wrapper）内嵌套复杂层叠逻辑——旋转会改变坐标系，建议优先用 transform + position 组合控制视觉层级；
• 若后续需更精细控制（如圆圈随滚动视差移动），推荐改用 position: absolute 配合 top/right 定位，而非 float；
• 所有参与 z-index 比较的元素，应确保其最近的非 static 定位祖先具有明确的层叠上下文（本例中 .slide.two 无需额外设置，因 relative 已由子元素自身触发）。

总结：z-index 不是万能开关，而是层叠上下文中的“排序指令”。始终牢记——先定位（position），再叠层（z-index）。添加 position: relative 是解决此类“z-index 失效”问题最常见且最可靠的起点。