КодSEOБлогИное

Как работает position: absolute;

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

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 39
<style>
.absolute {
  background: rgba(255, 182, 193, .7);
}
</style>

<span class="absolute">Элемент</span>

Расположить элемент с position: absolute; относительно границы ближайшего родителя с position не static

top
bottom
родительский элемент
position: relative;
дочерний элемент position: absolute;
left
right

Свойства top, right, bottom, left могут иметь как положительные, так и отрицательные значения в любых единицах измерения, а также в процентах. По умолчанию у них установлено значение auto.

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 39
<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.

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 39
<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 зависит от конкретной ситуации.

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 39 40
41 42 43 44 45 46 47 48 49 50
<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;.

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 39
<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+).

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 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
76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
<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%;).

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 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
76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
<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;.

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 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
<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>

Чтобы абсолютно позиционированный блок растянуть на всё содержимое вместе со скроллингом ближайшего позиционированного предка, нужно обернуть содержимое в ещё один тег, относительно которого позиционировать блок (см., прокрутить родителя).

Элемент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
<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>
Все комментарии