浏览器缩放时绝对定位元素错位？CSS时钟布局偏移问题求助

偏移的核心原因是绝对定位的参考容器错误：

• .middle-layer 使用 position: absolute + top: 50%; left: 50%; transform: translate(-50%, -50%) 实现居中，但它的父容器 .clock-container 未设置 position: relative。
• 这会导致 .middle-layer 的定位基准不是 .clock-container，而是向上寻找最近的有定位属性的祖先元素（此处不存在，因此会基于整个视口/初始包含块）。
• 而 .last-layer 嵌套在 .clock-container 内，.clock-container 被 .section-clock 的 flex 布局居中（且 .section-clock 带有上下内边距），浏览器缩放时，.middle-layer 的视口中心与 .last-layer 的容器中心会出现偏差，最终导致布局失调。

给 .clock-container 添加 position: relative，让 .middle-layer 的绝对定位以它为基准：

.clock-container {
  position: relative;
}

完整修复后的 CSS 代码如下：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

.section-clock {
  height: 100vh;
  background-color: #00a2ff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 9.6rem 0;
}

.clock-container {
  position: relative; /* 新增：设置相对定位作为绝对定位的基准 */
}

.top-dot {
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 50%;
  background-color: black;
}

.middle-layer {
  height: 20rem;
  width: 20rem;
  border-radius: 50%;
  background-color: #59c3ff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.last-layer {
  height: 30rem;
  width: 30rem;
  border-radius: 50%;
  background-color: white;
  border: 1.2rem solid black;
  position: relative;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

修改后，.middle-layer 会始终相对于 .clock-container 居中，与 .last-layer 保持布局比例一致，浏览器缩放时不会再出现偏移问题。

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