当使用 `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（无需改变布局位置，仅启用层叠上下文）：
⚠️ 注意事项：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
不要仅依赖 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 失效”问题最常见且最可靠的起点。
.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;
}