Как абсолютно позиционированный div влияет на своих детей?

Question

Мы находимся в процессе создания одностраничного веб-приложения с несколькими разделами, с которыми пользователь может взаимодействовать. В настоящее время мне нужно создать основную схему приложения, которая должна разделить страницу на эти отдельные разделы. У меня нет контроля над внутренним содержимым, которое будет добавлено в каждый раздел.

Каждый раздел должен быть увеличен пользователем и вытолкнуть другие секции из области просмотра. Из-за этого я думаю об использовании абсолютного позиционирования для каждого раздела, чтобы правильно позиционировать их и позволить легко менять положение на экране.

Идеально было бы, если бы кто-то мог развить внутреннее содержание каждого раздела, как если бы он развивал свою собственную страницу. Поэтому моя забота - как абсолютно позиционировать родительский div влияет на элементы детей, которые будут добавлены?

Answer 1

Опубликовать это, чтобы следить за выводами.

Основная проблема заключается в том, что позиционирование элемента как нестатического имеет непосредственное влияние на любых детей, которые позиционируются как абсолютные.

Это потому, что родительский элемент станет блоком данных этих детей, а не статическим. В последнем случае блок, содержащий детей, будет первым предком с другим положением, отличным от статического. См. Absolute positioning & Definition of containing block (спасибо @Edouard Lopez). Из-за этого любое позиционирование дочерних элементов будет связано с абсолютным родителем.

Кроме того, как описано в описании @fredsbend, абсолютный позиционированный элемент div будет расширяться в соответствии с шириной его содержащихся элементов, а не в соответствии с его контейнером, что будет иметь место для статического позиционного div. Это также повлияет на детей, если они не имеют явной ширины.

Answer 2

Я считаю, что свойство position: absolute|relative|... здесь указывает, как описанный элемент ведет себя относительно своих родителей/предков, а не как его дети будут вести себя.

Если вы используете абсолютное позиционирование для каждой секции, все они будут выходить из нормального потока. Это означает, что вам придется воссоздать механизм «нормальный поток». Я рекомендую ознакомиться с разделом Comparison of normal flow, floats, and positioning

Answer 3

Вопреки тому, что подразумевается в названии, элементы с абсолютным расположением будут расширяться или сжиматься с содержимым внутри них, пока вы не укажете ширину или высоту. http://jsfiddle.net/M3CZg/

#abs1 { 
position:absolute; 
top:0; 
} 
#abs2 { 
position:absolute; 
top:50px; 
width: 400px; 
} 

<div id="abs1"></div> 
<div id="abs2"></div> 

Заполните эти две дивы с любым содержанием, и они будут расширяться соответственно.

Для того, что вы говорите с помощью управляемых пользователем div, вы можете использовать минимальную ширину и минимальную высоту, а также максимальную ширину и максимальную высоту, чтобы поддерживать расширение в пределах диапазона. Это также потребует переполнения: скрытый в случае, если контент больше, чем максимальные. http://jsfiddle.net/M3CZg/3/ Поиграйте с этим и переместите окно, чтобы увидеть, как гибки div.