Элемент с position: absolute; смещается на расстояние, указанное в свойствах top, right, bottom, left, от края ближайшего родителя с position не static. Передвинуть его относительно своего расположения можно с помощью margin и transform. Размещение элемента над другими элементами правится с помощью свойства z-index.
После того, как свойство position примет значение absolute, размер элемента может измениться, а соседние элементы сдвинутся на освободившееся пространство.
Поместить элемент над другими элементами, убрав его из потока
Элемент с position: absolute; не влияет на размер родителя.
<style>
.raz {
border: 1px solid red;
}
.absolute {
background: lightpink;
}
</style>
<div class="raz">
<span class="absolute">Элемент</span>
</div>Элемент с position: absolute; не влияет на положение соседей: цифры 20, 21, 22, … смещаются к цифре 19.
<style>
.absolute {
background: rgba(255, 182, 193, .7);
}
</style>
<span class="absolute">Элемент</span>Расположить элемент с position: absolute; относительно границы ближайшего родителя с position не static
position: relative;
Свойства top, right, bottom, left могут иметь как положительные, так и отрицательные значения в любых единицах измерения, а также в процентах. По умолчанию у них установлено значение auto.
<style>
.raz {
position: relative;
background: mistyrose;
}
.absolute {
position: absolute;
top: 0;
background: lightpink;
}
</style>
<div class="raz">
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<span class="absolute">Элемент</span>
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
</div>
Если свойство border задано ближайшему родителю с position не static, то элемент смещается относительно внутреннего края рамки, созданной этим свойством.
Значения свойств top и bottom в процентах рассчитываются от высоты за минусом border-top-width и border-bottom-width ближайшего родителя с position не static. Значения свойств left и right в процентах рассчитываются от ширины за минусом border-left-width и border-right-width ближайшего родителя с position не static.
<style>
.raz {
position: relative;
border: 5px solid red;
}
.absolute {
position: absolute;
top: 50%; /* расстояние от внутреннего края border-top до верхнего края элемента */
left: 0; /* расстояние от внутреннего края border-left до левого края элемента */
background: lightpink;
}
</style>
<div class="raz">
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
<span class="absolute">Элемент</span>
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
</div>Использование свойств top или bottom, left или right зависит от конкретной ситуации.
<style>
.raz {
position: relative;
border: 5px solid red; /* border-width составляет 5px */
}
.absolute {
position: absolute;
top: -5px;
background: lightpink;
}
</style>
<div class="raz">
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<span class="absolute">Элемент</span>
28 29 30 31 32 33 34 35 36 37 38 39 40
</div>Ширина и высота элемента с position: absolute; относительно размера ближайшего родителя с position не static
Ширина элемента с position: absolute; без явно заданного значения устанавливается по содержимому. Элементы с display не block и position: absolute; ведут себя как элементы с display: block; и position: absolute;.
<style>
div.absolute {
background: lightcyan;
}
span.absolute {
background: lightpink;
}
</style>
<div class="absolute">Блочный</div>
<span class="absolute">Строчный</span>Без явно заданной ширины и/или высоты размер элемента определяется расстоянием от left не auto до right не auto и/или от top не auto до bottom не auto (для IE8+).
<style>
.raz {
position: relative;
border: 1px solid red;
}
.absolute {
position: absolute;
left: 0;
right: 0;
background: lightpink;
}
</style>
<div class="raz">
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
<span class="absolute">Элемент</span>
44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
</div>Стили, чтобы растянуть блок на всю ширину и высоту родителя без border, но с position не static:
left: 0; right: 0; top: 0; bottom: 0; /* или */ left: 0; right: 0; width: 100%; height: 100%; box-sizing: border-box;
С ограниченной шириной и/или высотой расстояние от left не auto до right не auto и/или от top не auto до bottom не auto определяет область, в рамках которой может перемещаться элемент с margin: auto; (для того, чтобы передвинуть элемент в центр верхней правой 1/4 части родителя см., left: 50%; right: 0; top: 0; bottom: 50%;). Если расстояние от left не auto до right не auto меньше width, то свойство right игнорируется (см., left: 50%; right: 50%;).
<style>
.raz {
position: relative;
border: 1px solid red;
}
.absolute {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: 30%;
height: 30%;
background: lightpink;
}
</style>
<div class="raz">
<div class="absolute">Элемент</div>
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75
</div>Свойство height в процентах не заменяется на height: auto;, даже когда ближайший родитель имеет height: auto;.
Блок с position: absolute; внутри ближайшего родителя с position не static и overflow не visible
Значение overflow отличное от visible у ближайшего родителя с position не static прячет выходящую за границы часть дочернего элемента с первого экрана видимости. Если у ближайшего родителя с position не static и overflow: auto; не ограничена ширина и высота, то при соответствующем direction появляется полоса прокрутки, которая изначально скрывает только выступающий элемент с position: absolute;.
<style>
.raz {
position: relative;
border: 5px solid red;
}
.absolute {
position: absolute;
top: 100%;
background: lightpink;
}
</style>
<div class="raz">
11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
<span class="absolute">Элемент</span>
28 29 30 31 32 33 34 35 36 37 38 39 40
</div>Позиционирование вложенного элемента относительно родителя
Родитель с position: static; пропускается. Если нет родителя с position не static, то положение элемента рассчитывается относительно границы области просмотра окна браузера (см., левый верхний угол страницы).
<style>
.raz,
.raz div {
border: 1px solid red;
padding: 1em;
}
.raz {
position: relative;
min-height: 7em;
}
.raz > div {
}
.raz div div {
}
.absolute {
position: absolute;
top: 0;
left: 0;
background: lightpink;
}
</style>
Дальний родитель:
<div class="raz">
Родитель над ближним:
<div>
Ближний родитель:
<div>
<span class="absolute">Элемент</span>
</div>
</div>
</div>Чтобы абсолютно позиционированный блок растянуть на всё содержимое вместе со скроллингом ближайшего позиционированного предка, нужно обернуть содержимое в ещё один тег, относительно которого позиционировать блок (см., прокрутить родителя).
<style>
.raz {
position: relative;
height: 3em;
border: 2px solid red;
overflow: auto;
}
.raz div {
padding: 1em;
}
.absolute {
position: absolute;
top: 0;
bottom: 0;
background: lightpink;
}
</style>
<div class="raz">
<div>
<div class="absolute">Элемент</div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
</div>
</div>Родитель с position: static; и overflow не visible, стоящий внутри позиционированного родителя, не прячет содержимое потомка с position: absolute;.
<style>
.raz,
.raz div {
border: 1px solid red;
padding: 1em;
}
.raz {
}
.raz > div {
position: relative;
}
.raz div div {
height: 2em;
overflow: auto;
}
.absolute {
position: absolute;
top: 100%;
height: 2em;
background: lightpink;
}
</style>
Дальний родитель:
<div class="raz">
Родитель над ближним:
<div>
Ближний родитель:
<div>
<span class="absolute">Элемент</span>
</div>
</div>
</div>Свойства width, margin и padding в процентах рассчитываются от ширины за минусом border-left-width и border-right-width ближайшего родителя с position не static.
<style>
.raz,
.raz div {
border: 1px solid red;
padding: 1em;
}
.raz {
position: relative;
min-height: 7em;
}
.raz > div {
}
.raz div div {
}
.absolute {
position: absolute;
left: 0;
margin-left: 50%;
background: lightpink;
}
</style>
Дальний родитель:
<div class="raz">
Родитель над ближним:
<div>
Ближний родитель:
<div>
<span class="absolute">Элемент</span>
</div>
</div>
</div>