定位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.Anyone我想要。但是当我移动任何div时，这必须影响其他。例如：当我将.subs中的余量添加到页面流时，我将这个效果添加到.first和.third div。我怎么办？

预期产出：

Answer 1

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

如果您希望<div>受其他div的边距影响，请尝试使用position:absolute（或flexbox获得更强大的解决方案）而不是float:left

Answer 2

取代position: absolute而不是relative

如果这可以解决您的问题，请查看CodePen Example

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

.second {
  background: red;
  margin-left: 200px;
}

.third {
  background: green;
  margin-left: 400px;
}

.first {
  background: yellow;
}

<强> HTML：

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

Answer 3

如果我理解正确，你想在所有三个div上添加一个余量？

我们可以通过将它们放在容器中来实现。

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

并将余量添加到container类。

.container {
  margin: 10px
}

使用JSFiddle：https://jsfiddle.net/pcyq20vx/