相對容器絕對定位的圖像不與容器

-1

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

來源

2016-02-09 praks5432

添加錯誤後，DOM看起來像什麼？ – Pointy

雖然你有位置：在img1上設置相對位置，但它實際上並沒有設置到任何特定位置，所以它仍然會隨着它周圍的內容一起流動。 – mcgraphix

您能否指定錯誤出現的地方？ –

通過使IMG2和IMG3 position: absolute，他們已經從文檔的標準流程中刪除。他們總是將相對於他們最近的具有定位的祖先進行定位。在這種情況下，這是father股利。所以無論你爲他們的top設置的值總是遠離father div的頂部。

來源

2016-02-09 23:16:03 Elezar

對，但是由於出現錯誤，父親div下移了，那麼爲什麼孩子divs也不行？ – praks5432

你的問題沒有提到任何有關父親移動...我認爲你需要更新的問題與更好的細節，究竟發生了什麼，或更好的，包括一個現場的例子。 – Elezar

相對容器絕對定位的圖像不與容器

回答

相關問題