html - CSS 嵌套位置

Question

我的网站上有多个 div。 Div 通常是 position: absolute;。它包含。我的问题是，当我放大和缩小页面时，它们会进入内部或者不在我想要的位置。我希望他们留在原地。我可以用边框解决这个问题吗？或者我如何解决这个问题？

下面是一个看起来像问题的示例代码:

.a1{
   position: absolute;
   top: 25%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   width: 27px;
   height: 27px;
   border-radius:50%;
   border: 5px solid #ddd;
	}
	
.a2{
   position: absolute;
   top: 45%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   width: 27px;
   height: 27px;
   border-radius:50%;
   border: 5px solid #ddd;
	}
	
.a3{
   position: absolute;
   top: 65%;
   left: 50%;
   transform: translateX(-50%) translateY(-50%);
   width: 27px;
   height: 27px;
   border-radius:50%;
   border: 5px solid #ddd;
	}

<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>

Answer 1

仅在不影响元素大小的情况下使用百分比值。所以在你的情况下，你可以使用垂直位置的像素值，或者你使用“计算”​​值，它具有中心元素的百分比加上/减去一个固定的像素值:

.a1{
   position: absolute;
   top: calc(45% - 60px);
   left: 50%;
   transform: translateX(-50%);
   width: 27px;
   height: 27px;
   border-radius:50%;
   border: 5px solid #ddd;
	}
	
.a2{
   position: absolute;
   top: 45%;
   left: 50%;
   transform: translateX(-50%);
   width: 27px;
   height: 27px;
   border-radius:50%;
   border: 5px solid #ddd;
	}
	
.a3{
   position: absolute;
   top: calc(45% + 60px);
   left: 50%;
   transform: translateX(-50%);
   width: 27px;
   height: 27px;
   border-radius:50%;
   border: 5px solid #ddd;
	}

<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>