Блог

Я читаю w3c.org Спецификация визуального форматирования.

Может ли кто-нибудь объяснить мне, почему встроенное поле «outer» не отображается в моем примере здесь? Я пытался понять абсолютное и относительное позиционирование. Поскольку в <p> теге не было позиционирования, я подумал, что, установив значения позиционирования на <div> , <span id="outer"> он будет абсолютно позиционироваться на div . Но этого не происходит. Если я удалю position:relative из <div> <span id="outer"> , будет отображаться. Я попытался установить параметр z-index на <p> , чтобы изменить порядок его укладки и сделать его выше, чем <div> , но это тоже не сработало. Насколько я понимаю, если элемент есть position:absolute , он будет проходить через DOM для первого «позиционированного» элемента и позиционировать себя с этим «родительским» элементом. И если позиционирование не найдено, оно будет позиционироваться по отношению к содержащему его элементу. Похоже, этого не происходит, поскольку его содержащий элемент находится <p id=inline> там, где нет позиционирования, но <div id="container"> есть position:relative . Надеюсь, я правильно объясняю это.

Он отображается правильно, но он по-прежнему зависит от границ содержащего div. Для этого div установлено значение «overflow: hidden», а абсолютная позиция #outer span выводит его за пределы границ div, поэтому он фактически невидим.

Если вы уберете «переполнение: скрыто», вы увидите, что окно отображается мгновенно.