html - 定位3个不同的div

Question

我在 html 文件中有 3 个不同的 div。

div {
  width: 200px;
  height: 200px;
  position: absolute;
}

.second {
  background: red;
  left: 200px;
  top: 200px;
}

.third {
  background: green;
  top: 400px;
  left: 400px;
}

.first {
  background: yellow;
}

<div class="first"></div>
<div class="second"></div>
<div class="third"></div>

我想移动一个 div。我想移动任何人。但是当我移动任何 div 时，这必须影响其他人。示例:当我向 .second div 添加边距时，此 div 在页面流中改变位置。我希望此效果到 .first和 .third div。我该怎么做？

预期输出:

Answer 1

CSS 的用途 position:absolute是从文档流中删除该元素，以便更改边距或大小不会影响它周围的其他元素。

如果你想要你的 <div> s 受其他 div 的边距影响，而不是使用 position:absolute尝试使用 float:left (或 flexbox 以获得更强大的解决方案)。