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

仅在不干扰元素大小的情况下使用百分比值。因此，在您的情况下，您可以使用垂直位置的像素值，或者使用"calc"值，该值具有中心元素的百分比加上/减去固定像素值：

.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>

Answer 2

添加一个div 包装其他的div，将这个放在你想要的任何位置，并使内部的div 有一个相对位置：

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

.a1, .a2, .a3 {position: relative}

这样，您就可以拥有更多更好的控制权。