相对容器中绝对定位的图像不会随容器一起移动[关闭]

Question

我有这样的HTML

<div>
  <div>
    <input class="button"></input>
  </div>
  <div class="father'>
     <img class="img1"></img>
     <img class="img2"></img>
     <img class="img2"></img>
  </div>
</div>

像这样的CSS

.father {
   position: relative;
}

.img1 {
  position: relative;
}

.img2, .img3 {
  position: absolute;
  top: //some amount
  left: //some amount
}

当html下的div中出现错误时，img1被下推，而img2和img3保留。 为什么会这样？ 我以为整个div会被向下推，相对于div，img2和img3也会向下移。

错误出现后，DOM看起来像

Answer 1

通过将img2和img3 position: absolute ，它们已从文档的标准流程中删除。 他们总是要相对于其最近的祖先进行定位。 在这种情况下，那是father div。 因此，无论您为它们的top值设置什么，都将永远是它们离father div顶部的距离。