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>

Это показывает хорошо, с стр.2 ниже страницы 1. Однако, когда я изменить позицию Img1 к абсолютной, почему он делает PAGE2 перекрывается с page1 (подводит его к позиции страницы 1)? Насколько я понимаю, установка абсолютной позиции приведет ее к нормальному потоку страницы, но не содержит img1 внутри страницы1? Почему страница1 выводится из нормального потока (я предполагаю, что это то, что происходит)?

источник

2014-09-29 user3749946

Когда img1 выведен из потока, страница 1 сжимается до минимальной высоты, которая должна быть. Таким образом, страница2 перемещается в начало страницы1. – Bobo

Ohhhhhh haha Я вижу. Спасибо! – user3749946

Я превратил этот комментарий в ответ :) – Bobo

Когда вы устанавливаете абсолютное положение img1, оно выходит из «нормального потока», как вы сказали. Таким образом, элемент page1 сжимается до минимальной высоты и ширины. Это приводит к тому, что элемент page2 перемещается вверх по нижней части страницы1.

Значит, ваши страницы1, page2 и img2 находятся в правильных местах на вашем макете, это только ваш img1, который находится вне его обычного места.

Я создал это fiddle, что показывает, что происходит. Как правило, поля «img» находятся внутри своих родительских полей. Но если вы установите img1 на position:absolute, он перемещается из логического потока, поэтому он является родительским, page1, сжимается до минимального размера.

источник

2014-09-29 20:30:00 Bobo

Спасибо! Супер полезно :) – user3749946

HTML/позиционирование CSS

ответ

Смежные вопросы