怎么让多个使用定位的节点不重叠
这样会使得这几个节点重叠，但是我想让他们分开，应该怎么做呢。注：必须要用到定位。
css
.guangdao {
width: 40px;
height: 230px;
margin-right:100px;
background-color: cadetblue;
position: absolute;
animation: guanleft 5s linear infinite;
}
html
<div id="changjing">
<div class="guangdao" data-id="0"></div>
<div class="guangdao" data-id="1"></div>
<div class="guangdao" data-id="2"></div>
<div class="guangdao" data-id="3"></div>
<div class="guangdao" data-id="4"></div>
<div class="guangdao" data-id="5"></div>
<div class="guangdao" data-id="6"></div>
<div class="guangdao" data-id="7"></div>
</div> 使用定位时，可以通过调整节点的top和left属性来改变它们的位置。为了让多个节点不重叠，你可以为每个节点设置不同的top和left值。
例如，假设有三个节点类名都为"guangdao"，你可以为它们分别设置不同的top和left值：
.guangdao {
width: 40px;
height: 230px;
margin-right: 100px;
background-color: cadetblue;
position: absolute;
animation: guanleft 5s linear infinite;
}
.guangdao1 {
top: 0;
left: 0;
}
.guangdao2 {
top: 100px;
left: 50px;
}
.guangdao3 {
top: 200px;
left: 100px;
}
然后，在HTML中分别为每个节点添加对应的类名：
<div class="guangdao guangdao1"></div>
<div class="guangdao guangdao2"></div>
<div class="guangdao guangdao3"></div>
这样，每个节点就会根据它们的top和left值在页面上分开显示，而不会重叠。你可以根据需要调整每个节点的top和left值来达到理想的效果。
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。
页:
[1]