Ответ
Свойство position в CSS определяет метод позиционирования элемента. Значения relative и absolute кардинально меняют поведение элемента в потоке документа.
position: relative;
- Элемент остается в нормальном потоке документа.
- Свойства
top,right,bottom,leftсдвигают элемент относительно его исходного положения. - Место, которое элемент занимал изначально, остается зарезервированным — другие элементы его не занимают.
position: absolute;
- Элемент извлекается из нормального потока. Его исходное место занимают другие элементы.
- Он позиционируется относительно ближайшего предка с
position, отличного отstatic(чаще всегоrelative). Если такого нет — относительно окна браузера (viewport). - Свойства
top,right,bottom,leftзадают отступы от границ этого контейнера-предка.
Практический пример:
<div class="container">
<div class="box relative">Relative Box</div>
<div class="box absolute">Absolute Box</div>
<div class="box static">Static Box (следующий в потоке)</div>
</div>.container {
position: relative; /* Контекст позиционирования для .absolute */
border: 2px solid blue;
padding: 20px;
}
.box {
height: 50px;
border: 2px solid black;
margin: 5px;
}
.relative {
position: relative;
top: 10px; /* Сдвинется вниз, но его место останется пустым */
left: 20px; /* Сдвинется вправо */
background: lightgreen;
}
.absolute {
position: absolute;
top: 10px; /* Прилипнет к верху .container */
right: 10px; /* Прилипнет к правому краю .container */
background: lightcoral;
width: 150px;
}
.static {
/* position: static (по умолчанию) */
background: lightblue;
}В этом примере:
- Зеленый (
relative) блок сдвинут, но синий блок (static) начинается там, гдеrelativeбыл изначально. - Красный (
absolute) блок "висит" в правом верхнем углу синего контейнера, а синий блок поднялся на его место.
Ответ 18+ 🔞
Э, слушай, давай разберём эту дичь с position, а то народ путается, как последние идиоты. Представь, что элементы на странице — это люди в очереди за колбасой.
position: relative; — это как если ты встал в очередь, а потом отошёл нахуй на пару шагов посмотреть ценник. Твоё место в очереди за тобой остаётся, все тебя видят, но ты стоишь чуть в стороне. Свойства top, left — это и есть те шаги, на которые ты отошёл. Твоё первоначальное место никто не занимает, оно свято, блядь.
position: absolute; — это уже полный пиздец. Ты из очереди выходишь совсем. Ты больше не в строю. Ты ищешь ближайшего родственника с властью (элемент-предок с position не static) и прилипаешь к нему, как банный лист. Если такого родственника нет — летишь на хуй прямо к окну браузера. А твоё место в очереди моментально занимает следующий алкаш. Ты вне потока, чувак. Вне.
Смотри, как это выглядит на практике, ёпта:
<div class="container">
<div class="box relative">Relative Box</div>
<div class="box absolute">Absolute Box</div>
<div class="box static">Static Box (следующий в потоке)</div>
</div>.container {
position: relative; /* Вот этот папаша теперь точка отсчёта для absolute-выблядка */
border: 2px solid blue;
padding: 20px;
}
.box {
height: 50px;
border: 2px solid black;
margin: 5px;
}
.relative {
position: relative;
top: 10px; /* Отошёл на 10px вниз от своего места, но место его ждёт! */
left: 20px; /* И вбок на 20px */
background: lightgreen;
}
.absolute {
position: absolute;
top: 10px; /* Прижмётся к верху папаши-контейнера */
right: 10px; /* И к правому его краю */
background: lightcoral;
width: 150px;
}
.static {
/* Он по умолчанию static, обычный честный член очереди */
background: lightblue;
}Что тут происходит, блядь?
- Зелёный урод (
relative) пошевелился, но синий блок (static) встал на то самое место, где зелёный стоял изначально. Очередь не сломалась. - Красный мудак (
absolute) вообще вышел из строя и теперь висит в правом верхнем углу синей обводки контейнера. А синий блок, не долго думая, занял его вакантное место в очереди. Вот и вся магия, ебать её в сраку.