Наложение (position: absolute;)

• Позиционирование position
  • position: static;
  • position: relative;
  • position: absolute;
    • Поместить элемент над другими элементами, убрав его из потока
    • Передвинуть элемент с position: absolute; относительно своего расположения
    • Расположить элемент с position: absolute; относительно границы ближайшего родителя с position не static
    • Ширина и высота элемента с position: absolute; относительно размера ближайшего родителя с position не static
    • Блок с position: absolute; внутри ближайшего родителя с position не static и overflow не visible
    • Позиционирование вложенного элемента относительно родителя
  • position: fixed;
  • position: sticky;
• Обрезать элемент с position absolute
• Появляющаяся при наведении курсора мышки подсказка
• Горизонтальное выпадающее меню

Элемент с position: absolute; смещается на расстояние, указанное в свойствах top, right, bottom, left, от края ближайшего родителя с position не static. Положение элемента над другими элементами правится с помощью свойства z-index.

После того, как свойство position примет значение absolute, размер элемента может измениться, а соседние элементы сдвинутся на освободившееся пространство.

Поместить элемент над другими элементами, убрав его из потока

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

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

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

Передвинуть элемент с position: absolute; относительно своего расположения

Совместно с position: absolute; часто используются такие свойства, как margin и transform, в том числе при выравнивании по центру родителя.

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

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

top: 0; left: 0;

right: 0; bottom: 0;

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.

height: 5em; ближайшего родителя padding: 1em; ближайшего родителя box-sizing: border-box; ближайшего родителя

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

top: -5px; top: 0; top: 5px; top: 100%;

bottom: -5px; bottom: 0; bottom: 5px; bottom: 100%;

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

position: absolute; блочного 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+). Стили, чтобы растянуть блок на всю ширину и высоту родителя без border:

  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

/* или */ 

  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;

left: auto; left: 50%; left: 1em; left: 0; left: -1em;	right: auto; right: 50%; right: 1em; right: 0; right: -1em;
top: auto; top: 50%; top: 1em; top: 0; top: -1em;	bottom: auto; bottom: 50%; bottom: 1em; bottom: 0; bottom: -1em;

border: .5em solid fuchsia; padding: 1em;

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>

С ограниченной шириной и/или высотой расстояние от 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%;).

left: auto; left: 50%; left: 1em; left: 0; left: -1em;	right: auto; right: 50%; right: 1em; right: 0; right: -1em;
top: auto; top: 50%; top: 1em; top: 0; top: -1em;	bottom: auto; bottom: 50%; bottom: 1em; bottom: 0; bottom: -1em;

border: .5em solid fuchsia; padding: 1em;

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>

Блок с position: absolute; внутри ближайшего родителя с position не static и overflow не visible

Значение overflow отличное от visible у ближайшего родителя с position не static прячет выходящую за границы часть дочернего элемента с первого экрана видимости. Если у ближайшего родителя с position не static и overflow: auto; не ограничена ширина и высота, то при соответствующем direction появляется полоса прокрутки, которая изначально скрывает только выступающий элемент с position: absolute;.

overflow: visible; ближайшего родителя (по умолчанию) overflow: auto; ближайшего родителя overflow: hidden; ближайшего родителя

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, то положение элемента рассчитывается относительно границы <html> (см., левый верхний угол страницы).

position: relative; дальнего родителя position: absolute; родителя, стоящего сразу над ближним position: relative; ближнего родителя Дальний родитель:

Родитель над ближним:

Ближний родитель:

Элемент

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

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

position: relative; ближнего родителя

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

overflow: auto; дальнего родителя position: relative; ближнего родителя Дальний родитель:

Родитель над ближним:

Ближний родитель:

Элемент

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

У элемента с position: absolute; свойство margin в процентах рассчитывается относительно ширины за минусом border-left-width и border-right-width ближайшего родителя с position не static.

position: relative; дальнего родителя position: absolute; родителя, стоящего сразу над ближним position: relative; ближнего родителя Дальний родитель:

Родитель над ближним:

Ближний родитель:

Элемент

<style>
.raz,
.raz div {
  border: 1px solid red;
  padding: 1em;
}
.raz {
  position: relative;
  min-height: 7em;
}
.raz > div {
}
.raz div div {
}
.absolute {
  position: absolute;
  margin-left: 50%;
  background: lightpink;
}
</style>

Дальний родитель:
<div class="raz">
  Родитель над ближним:
  <div>
    Ближний родитель:
    <div>
      <span class="absolute">Элемент</span>
    </div>
  </div>
</div>