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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

通过这种方式，您可以获得更多更好的控制权。

CSS嵌套位置

2 个答案: