相对容器绝对定位的图像不与容器

问题描述：

<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看起来像

添加错误后，DOM看起来像什么？ – Pointy

虽然你有位置：在img1上设置相对位置，但它实际上并没有设置到任何特定位置，所以它仍然会随着它周围的内容一起流动。 – mcgraphix

您能否指定错误出现的地方？ –

答

通过使IMG2和IMG3 position: absolute，他们已经从文档的标准流程中删除。他们总是将相对于他们最近的具有定位的祖先进行定位。在这种情况下，这是father股利。所以无论你为他们的top设置的值总是远离father div的顶部。

对，但是由于出现错误，父亲div下移了，那么为什么孩子divs也不行？ – praks5432

你的问题没有提到任何有关父亲移动...我认为你需要更新的问题与更好的细节，究竟发生了什么，或更好的，包括一个现场的例子。 – Elezar

相对容器绝对定位的图像不与容器

相关推荐