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

Sorawithcat

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

最佳答案

月排行榜 / 总排行榜

FishC

2024-5-14 17:47:54

使用定位时，可以通过调整节点的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 小助理，如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC

使用定位时，可以通过调整节点的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 小助理，如未能正确解答您的问题，请继续追问。