Относительно чего считается смещение top и left при position absolute в CSS
Что проверяют
Знаете ли вы, что такое содержащий блок, и понимаете ли, что абсолютное позиционирование отсчитывается не от родителя в разметке, а от ближайшего позиционированного предка. Заодно выясняют, сталкивались ли вы с тем, что содержащий блок создаёт не только position.
Как отвечать
Элемент с position: absolute выпадает из потока, и его top, left, right, bottom считаются от содержащего блока. Правила такие:
- содержащий блок это ближайший предок с
position, не равнымstatic, то естьrelative,absolute,fixedилиsticky; - отсчёт идёт от padding-box этого предка: рамка предка в смещение входит, а его внутренние отступы нет;
- если позиционированного предка нет, элемент считается от начального содержащего блока, привязанного к корню документа и равного по размеру области просмотра. Это не
body: отступы уbodyна расчёт не влияют; - содержащий блок для потомков создают также
transform,filter,perspective,will-changeс этими свойствами иcontainсо значением layout или paint, даже еслиpositionосталсяstatic.
Полезно добавить про пару противоположных смещений: если задать и left, и right при width: auto, элемент растянется между ними, то же по вертикали. А если не задать ни одного смещения, он останется там, где оказался бы в потоке, но перестанет занимать это место.
Где спотыкаются
Говорят «относительно родителя». Родитель по разметке и содержащий блок совпадают только тогда, когда родителю явно задали позиционирование, иначе отсчёт уедет выше по дереву, иногда до самого документа.
Второе: забывают про transform. Трансформация на предке делает его содержащим блоком, и тогда даже position: fixed внутри перестаёт быть привязанным к экрану и начинает прокручиваться вместе с контейнером. Это частая причина «сломанного» модального окна.
Третье: путают отсчёт от padding-box и от области содержимого. Внутренний отступ контейнера абсолютный элемент не сдвигает, поэтому top: 0; left: 0 ставит его вплотную к внутреннему краю рамки, а не к тексту внутри.