HTML/CSS定位

-1

所以我有以下代碼：HTML/CSS定位

<body> 
<div id="page1" style="page-break-after:always;position:relative;"> 
    <img ... id="img1" style="position: relative; left: 0px; top: 0px; width:750px"></img> 
    ... 
</div> 
<div id="page2" style="page-break-after:always;position:relative;"> 
    <img ... id="img2" style="position: relative; left: 0px; top: 0px; width:750px"></img> 
    ... 
</div> 
</body>

這1頁下方顯示細膩，用2頁但是，當我改變IMG1的位置，絕對的，爲什麼它使與第1頁第2頁重疊（把它帶到page1的位置）？根據我的理解，將position設置爲絕對會使其脫離頁面的正常流程，但不是page1中包含的img1？爲什麼page1被帶出正常流程（我假設這是發生的事情）？

來源

2014-09-29 user3749946

當img1離開流程時，page1縮小到它需要的最小高度。所以page2會移動到page1的底部。 – Bobo 2014-09-29 20:22:18

Ohhhhhh哈哈，我明白了。謝謝！ – user3749946 2014-09-29 20:26:30

我已將該評論轉換爲答案:) – Bobo 2014-09-29 20:30:11

當您將img1位置設置爲絕對位置時，它將移出「正常流程」，就像您所說的那樣。所以page1元素收縮到最小的高度和寬度。這會導致page2元素上移到page1的底部。

因此，您的page1，page2和img2都在您的佈局的正確位置，它只是你的img1超出了它的常規位置。

我已創建此fiddle，顯示正在發生的事情。通常，'img'框位於其父頁框內。但是，如果您將img1設置爲position:absolute，它將移出邏輯流程，因此它的父級頁面1會縮小至最小大小。

來源

2014-09-29 20:30:00 Bobo

謝謝！超級有用:) – user3749946 2014-09-30 12:57:13

回答

相關問題