Ответ
Контекст позиционирования создается с помощью свойства position со значением relative, absolute, fixed или sticky. Элемент с таким позиционированием становится контекстом для своих дочерних элементов с position: absolute или fixed.
Пример:
<div class="parent">
<div class="child"></div>
</div>.parent {
position: relative; /* Создаем контекст позиционирования */
width: 300px;
height: 200px;
background: #eee;
}
.child {
position: absolute;
top: 20px;
left: 30px;
width: 100px;
height: 50px;
background: #f00;
}Важно:
- По умолчанию контекстом является viewport
position: staticне создает контекстtransform,filterиwill-changeтакже могут создавать новый контекст
Ответ 18+ 🔞
О, слушай, вот это тема, про которую все вроде бы знают, а потом на ровном месте ебутся как кошки в мешке. Контекст позиционирования, блядь! Это когда ты берешь свой div и говоришь ему: «Стой тут, сука, и будь точкой отсчета для моих вырвиглазных экспериментов».
Вот смотри, есть у тебя элемент. Пока у него position: static (это по умолчанию), он нихуя не референс, он просто часть потока, как все. Но стоит ему получить relative, absolute, fixed или sticky — всё, он стал папой. Теперь все его детишки с position: absolute будут смотреть не куда-то в космос (вьюпорт), а на него, на этого нового папочку. Они будут отмерять свои top и left от его границ, а не от края окна браузера.
Вот тебе живой пример, чтобы не быть голословным пиздаболом:
<div class="parent">
<div class="child"></div>
</div>.parent {
position: relative; /* Вот тут-то всё и начинается, ёпта! */
width: 300px;
height: 200px;
background: #eee; /* Серенький такой, скучный фон */
}
.child {
position: absolute; /* А этот шалопай теперь привязан к родителю */
top: 20px;
left: 30px;
width: 100px;
height: 50px;
background: #f00; /* И гордо краснеет в указанном месте */
}Важные нюансы, которые все хуярят:
- По умолчанию контекстом является viewport — окно браузера. То есть если у
childнет папочки с правильнымposition, он улетит в самые дебри документа, ищи потом свищи. position: static— это как быть беспаспортным бомжом, контекст не создает, нихуя.- А вот это, блядь, самое интересное! Такие штуки как
transform,filterиwill-changeтоже могут неожиданно создать новый контекст! Представь: ты поставил родителю какую-нибудьtransform: translate(0), просто чтобы хардвера ускорить, а твойabsolute-ребенок вдруг съехал куда-то в пизду! Вот оно почему! Он теперь считает от этого родителя с трансформом. Ёперный театр, да?
Короче, запомни: хочешь привязать один хуй к другому — сначала сделай из второго референсную точку. Иначе будет волнение ебать, где этот пиксель сбежал.