HTML/CSS实现分段圆形时，左侧、底部区块无法随屏幕分辨率固定

偏移根因 #

• 所有圆形分段组件直接挂载在body下做绝对定位，定位参考系是整个浏览器视口，而非本身居中的圆形主体，位置没有和圆形主体绑定
• 尺寸单位混用：主圆形本身用em作为尺寸单位，会随屏幕缩放、DPI变化动态调整大小；偏移异常的左侧、底部区块使用固定px尺寸+基于视口边缘的百分比做定位，当屏幕分辨率、缩放比例变化时，两类尺寸的换算关系失配，自然会出现位置错位
• 当前定位正常的组件（如.myCircle3、.myCircle4）都以视口中心点为定位原点，和主圆形的居中位置完全重合，因此不会随视口尺寸变化偏移；而偏移的两个区块以视口边缘为百分比计算起点，和主圆形的位置没有关联，是偏移的核心来源。

修复步骤 #

1. 新增独立的圆形定位容器
   把所有和圆形相关的组件全部移入同一个容器内，容器和主圆形尺寸完全一致，在视口居中显示，所有内部区块的定位全部以这个容器为参考，彻底切断和视口边缘的定位关联。
   容器样式示例：

   .circle-wrapper {
       position: absolute;
       inset: 0;
       margin: auto;
       width: 27em;
       height: 27em;
   }
   

   对应HTML结构调整：

   <div class="circle-wrapper">
       <!-- 所有原直接放在body内的圆形相关组件全部移入容器 -->
       <div class="circle"></div>
       <div class="cirlce2"></div>
       <div class="myCircle2"></div>
       <div class="myCircle3"></div>
       <div class="myCircle4"></div>
       <div class="div"></div>
       <div class="bottom-right-quarter-circle"></div>
       <div class="bottom-left"></div>
   </div>
   

2. 修正偏移区块的定位逻辑
   把原来基于视口边缘的百分比定位，替换为基于容器内部坐标系的定位，保证所有区块和圆形主体的相对位置固定：
   • 左侧区块.bottom-left移除无效的margin: auto和基于视口的偏移值，调整为：

     .bottom-left {
         position: absolute;
         height: 145px;
         width: 155px;
         /* 基于容器内部坐标系对齐，不依赖视口边缘 */
         top: 50%;
         left: 0;
         transform: translateY(10%);
         border-radius: 0 0 0 250px;
         background-color: rgba(255, 255, 255, .3);
     }
     

   • 底部遮罩块.div保留中心对齐逻辑，匹配容器坐标系：

     .div {
         position: absolute;
         top: 60%;
         left: 50%;
         transform: translate(-50%, -50%);
         height: 152px;
         width: 320px;
         border-radius: 0 0 150px 150px;
         background-color: #457CB0;
     }
     

3. 统一尺寸单位
   为了适配不同屏幕缩放场景，把原来固定px的区块尺寸替换为和主圆形一致的em单位，保持所有分段区块和主圆形的比例固定，不会因为缩放出现比例失调。

额外优化点 #

• 修正原代码类名拼写错误：.cirlce2 改为 .circle2，降低后续维护成本
• 移除.bottom-left内失效的margin: auto属性，减少无意义的样式计算
• 不需要额外调整其他已正常定位的组件逻辑，仅需将其移入容器内即可保持原有定位效果。

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