相对容器中的绝对定位图像不随容器

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的顶部。