Html 用相同尺寸的另一个div完全覆盖一个div

问题:

当它们被覆盖时，我不应该看到任何其他的潜在div（与覆盖它们的div大小相同）

.gauge包装器{
位置：相对位置；
利润率：20px；
背景色：黑色；
}
.轨距弧{
位置：绝对位置；
排名：0；
左：0；
宽度：100px；
高度：100px；
边界半径：100%；
边界：7px固体；
}
.仪表-arc1{
边框颜色：红色透明；
变换：旋转（200度）；
}
.仪表-arc2{
边框颜色：红色透明；
变换：旋转（180度）；
}
.仪表-arc3{
边框颜色：红色透明；
变换：旋转（180度）；
}
.仪表罩{
边框颜色：透明白色透明；
z指数：9999
}
.仪表背景{
边框颜色：#c3bdbd；
z指数：-1；
}

---

如果使用框大小调整，则可以将遮罩放大2倍，从而使其边框加厚2倍，这样可以覆盖以下圆弧：

*{
框大小：边框框；/*使正方形无论填充和边框大小都相同*/
}
.量规包装{
宽度：102px；/*请给出此宽度和高度（可选），否则它将不占用空间，因为里面的所有东西都是绝对定位的*/
高度：102px；
位置：相对位置；
利润率：20px；
}
.轨距弧{
位置：绝对位置；
顶部：1px；/*将这些1px从内部开始，使外圈“更大”，并覆盖*/
左：1px；
宽度：100px；
高度：100px；
边界半径：50%；
边界：7px固体；
}
.仪表-arc1{
边框颜色：红色透明；
变换：旋转（200度）；
}
.仪表-arc2{
边框颜色：红色透明；
变换：旋转（180度）；
}
.仪表-arc3{
边框颜色：红色透明；
变换：旋转（180度）；
}
.仪表罩{
排名：0；
左：0；
宽度：102px；
高度：102px；
边界：9px固体；
边框颜色：透明白色透明；
z指数：9999
}
.仪表背景{
边框颜色：#c3bdbd；
z指数：-1；
}

不确定我是否理解正确。是否要隐藏圆形底部白色部分周围的红色轮廓？类似于

.gauge mask{transform:translateY（-2px）；边框底部宽度：11px；}

？如果我误解了，请告诉我。这可能是相关的吗？你知道为什么div一开始没有被完全覆盖吗？我认为这只是浏览器渲染曲线边的方式——当你在彼此的顶部看到相同的曲线边时，一些浏览器无法处理这一点，而底部的那一条会流出来