[已解决]怎么让多个使用定位的节点不重叠

Sorawithcat

这样会使得这几个节点重叠，但是我想让他们分开，应该怎么做呢。
注：必须要用到定位。
css

1.         .guangdao {
   
2.             width: 40px;
   
3.             height: 230px;
   
4.             margin-right:100px;
   
5.             background-color: cadetblue;
   
6.             position: absolute;
   
7.             animation: guanleft 5s linear infinite;
   
8.         }

复制代码

html

1.         <div id="changjing">
   
2.             <div class="guangdao" data-id="0"></div>
   
3.             <div class="guangdao" data-id="1"></div>
   
4.             <div class="guangdao" data-id="2"></div>
   
5.             <div class="guangdao" data-id="3"></div>
   
6.             <div class="guangdao" data-id="4"></div>
   
7.             <div class="guangdao" data-id="5"></div>
   
8.             <div class="guangdao" data-id="6"></div>
   
9.             <div class="guangdao" data-id="7"></div>
   
10.         </div>

复制代码

最佳答案

月排行榜 / 总排行榜

FishC

2024-5-14 17:47:54

使用定位时，可以通过调整节点的top和left属性来改变它们的位置。为了让多个节点不重叠，你可以为每个节点设置不同的top和left值。

例如，假设有三个节点类名都为"guangdao"，你可以为它们分别设置不同的top和left值：

1. .guangdao {
   
2.   width: 40px;
   
3.   height: 230px;
   
4.   margin-right: 100px;
   
5.   background-color: cadetblue;
   
6.   position: absolute;
   
7.   animation: guanleft 5s linear infinite;
   
8. }
   
9. 
   
10. .guangdao1 {
    
11.   top: 0;
    
12.   left: 0;
    
13. }
    
14. 
    
15. .guangdao2 {
    
16.   top: 100px;
    
17.   left: 50px;
    
18. }
    
19. 
    
20. .guangdao3 {
    
21.   top: 200px;
    
22.   left: 100px;
    
23. }

复制代码

然后，在HTML中分别为每个节点添加对应的类名：

1. <div class="guangdao guangdao1"></div>
   
2. <div class="guangdao guangdao2"></div>
   
3. <div class="guangdao guangdao3"></div>

复制代码

这样，每个节点就会根据它们的top和left值在页面上分开显示，而不会重叠。你可以根据需要调整每个节点的top和left值来达到理想的效果。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC

使用定位时，可以通过调整节点的top和left属性来改变它们的位置。为了让多个节点不重叠，你可以为每个节点设置不同的top和left值。

例如，假设有三个节点类名都为"guangdao"，你可以为它们分别设置不同的top和left值：

1. .guangdao {
   
2.   width: 40px;
   
3.   height: 230px;
   
4.   margin-right: 100px;
   
5.   background-color: cadetblue;
   
6.   position: absolute;
   
7.   animation: guanleft 5s linear infinite;
   
8. }
   
9. 
   
10. .guangdao1 {
    
11.   top: 0;
    
12.   left: 0;
    
13. }
    
14. 
    
15. .guangdao2 {
    
16.   top: 100px;
    
17.   left: 50px;
    
18. }
    
19. 
    
20. .guangdao3 {
    
21.   top: 200px;
    
22.   left: 100px;
    
23. }

复制代码

然后，在HTML中分别为每个节点添加对应的类名：

1. <div class="guangdao guangdao1"></div>
   
2. <div class="guangdao guangdao2"></div>
   
3. <div class="guangdao guangdao3"></div>

复制代码

这样，每个节点就会根据它们的top和left值在页面上分开显示，而不会重叠。你可以根据需要调整每个节点的top和left值来达到理想的效果。

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。