Элемент с 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>