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

Question

<style type="text/css"> 
body > div { 
    display: inline; 
    position: relative; 
} 
body > div > div { 
    position: absolute; 
} 
</style> 
<div> 
    <div></div> 
</div> 

Каков точный содержащий блок внутреннего div?

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

В чем смысл «ограничивающей рамки вокруг полей заполнения первого и последнего встроенных блоков, сгенерированных для этого элемента» в тексте выше?

Answer 1

Встроенный элемент не может «содержать» блок-уровень в традиционном смысле. Что происходит, так это то, что этот встроенный элемент разбивается на отдельные встроенные поля, которые живут в анонимных блоках , окружающих, что блок-уровень. См section 9.2.1.1 мимо первого примера:

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

(Существует нет перевода здесь происходит, поэтому последнее предложение дерзкое.)

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

1. пустой и
2. в том же положении: такое же положение, как strut.

И поскольку встроенный элемент не имеет прокладки, поля заполнения пустых встроенных ящиков измеряются равными нулю по длине, чем высота строки. (Обратите внимание, что некоторые инструменты разработчика браузера могут отображать это как единую точку, отмеченную перекрестием, когда вы проверяете внешний div.) Содержающий блок внутреннего (абсолютно позиционированного) div определяется по периметру этих дополняющих полей, объединенных, и любой смещения на внутреннем div (верхний, правый, нижний, левый) относятся к этому периметру. Обратите внимание, однако, что, поскольку встроенные поля фактически не имеют содержимого, фактическое положение внутреннего div такое же, как и у внешнего div, имеет, у внешнего div имелся контент.