CSS: вложение абсолютного div в абсолютный div?

<div style="position:absolute; height:500px;"> 
    <div style="position:absolute; bottom:0;">xxx</div> 
</div>

Если я устанавливаю абсолютный div с нижним: 0 внутри другого абсолютного div, будет ли внутренний div всегда прикрепляться к нижней части родительского div или он будет придерживаться нижней части окна (в некоторых браузерах)? На практике внутренний div придерживается нижней части родительского div, но он не чувствует себя хорошей практикой, и я беспокоюсь, что это может быть или устаревать. Или это прекрасно?CSS: вложение абсолютного div в абсолютный div?

источник

2017-01-25 sconewolf

Выглядит хорошо для меня, вы можете установить максимальную высоту и переполнение для дочернего элемента, чтобы он мог показывать полосу прокрутки, если она достигает верхней части родителя. Родитель может также находиться в относительном положении, чтобы оставаться в потоке всего документа. –

Это поведение вложенных абсолютных элементов, как указано в спецификации. То, что вы имеете в виду с элементом, прикрепленным к нижней части окна, является совершенно другим значением 'position', называемым' fixed'. Совершенно безопасно использовать вложенные, абсолютно позиционированные элементы. –

Прочитайте это: https://developer.mozilla.org/en/docs/Web/CSS/position

Абсолютное позиционирование:

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

Вообще говоря, когда у вас есть позиционируемый элемент (в основном ничего, кроме static), он создает новый контекст позиционирования для дочерних элементов. (Хорошо, на самом деле это может быть не совсем так просто и имеет некоторые зависимости от браузера, особенно когда дело доходит до fixed.) В вашем примере внутренний div будет придерживаться нижней части внешнего div.

Что происходит с лучшими практиками, создание полномасштабных макетов с абсолютным позиционированием, как правило, не очень хорошая идея. Для макетов используйте такие вещи, как float и свойство display. Но кроме этого нет ничего плохого в использовании абсолютного позиционирования для вещей, например, находятся поверх других вещей и, таким образом, на самом деле не являются частью базовой компоновки. Не бойтесь устареть.

источник

2017-01-25 20:28:42 Roope

Итак, абсолютно позиционированный div будет придерживаться только окна, когда он не находится внутри другого div? – sconewolf

@ 5south Чтобы быть конкретным, если единственным родителем является 'body', он будет придерживаться' body'. Не окно. Используйте 'fixed' для привязки к окну просмотра, как показано на странице MDN, с которой я связан. – Roope

Следовательно, независимо от того, является ли родительский div абсолютным или относительным, дочерний div, расположенный абсолютно, всегда будет придерживаться родителя. – sconewolf

CSS: вложение абсолютного div в абсолютный div?

ответ

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