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

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

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

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

Переместить элемент над другими элементами

Чтобы элемент «2» спрятался под другой часто неподвижный элемент «1», можно элементу «1» указать position: relative;, при котором не игнорируется свойство z-index.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Элемент «1» Элемент «2» 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
<style>
.relative {
  background: lightpink;
}
.margin {
  margin-left: -5em;
  background: lightcyan;
}
</style>

<span class="relative">Элемент «1»</span>
<span class="margin">Элемент «2»</span>

Большое количество контекста наложения усложняет работу, поэтому лучше не применять z-index там, где без него можно обойтись.

1 2 3
11 12 13 14 15 16 17 18 19 20

<style>
div:first-child {
}
div {
  border: 1px solid red;
}
span {
  position: absolute;
  width: 10em;
  height: 5em;
  background: lightpink;
}
</style>

<div>
  1 2 3
  <span></span>
</div>
<div>
  11 12 13 14 15 16 17 18 19 20
</div>

Сместить элемент в сторону так, чтобы соседние элементы остались на своих местах

исходное положение
элемент
position: relative
top
-bottom
left
-right

Cвойства 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 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 Подвинусь на 3em вниз от первоначального расположения верхнего края элемента 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140
<style>
.relative {
  background: lightpink;
}
</style>

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

Элемент с top: -4em; примет то же положение, что и с bottom: 4em;. Элемент с left: -4em; примет то же положение, что и с right: 4em;.

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 Подвинусь на 2em вверх от первоначального расположения верхнего края элемента 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140
<style>
.relative {
  position: relative;
  top: -4em;
  background: lightpink;
}
</style>

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

При одновременном использовании свойств top и bottom, свойство bottom игнорируется. При одновременном использовании свойств left и right, свойство 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 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 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140
<style>
.relative {
  position: relative;
  background: lightpink;
}
</style>

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

Значения свойств top и bottom в процентах рассчитываются от высоты содержимого ближайшего не inline родителя, у которого height не 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 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 {
  border: 1px solid red;
}
.relative {
  position: relative;
  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="relative">Элемент</span>
  28 29 30 31 32 33 34 35 36 37 38 39 40
</div>

Если height ближайшего родителя имеет значение auto, то height в процентах заменяется на height: auto;, при котором не работают свойства top и bottom в процентах у ближайших потомков.

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 {
  border: 1px solid red;
}
.raz div {
  border: 1px solid red;
}
.relative {
  position: relative;
  top: 100%;
  background: lightpink;
}
</style>

<div class="raz">
  1 2 3 4 5 6 7 8 9 10
  <div>
    11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
    <span class="relative">Элемент</span>
    28 29 30 31 32 33 34 35 36 37 38 39 40
  </div>
  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
</div>

Значения свойств left и right в процентах рассчитываются от ширины содержимого ближайшего не inline родителя.

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 {
  border: 1px solid red;
}
.relative {
  position: relative;
  left: 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="relative">Элемент</span>
  28 29 30 31 32 33 34 35 36 37 38 39 40
</div>

Значения свойств top, right, bottom, left в процентах пропускают inline родителя.

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 {
  border: 1px solid red;
}
.raz mark {
  height: 5em;
  border: 1px solid red;
}
.relative {
  position: relative;
  top: 100%;
  background: lightpink;
}
</style>

<div class="raz">
  1 2 3 4 5 6 7 8 9 10
  <mark>
    11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
    <span class="relative">Элемент</span>
    28 29 30 31 32 33 34 35 36 37 38 39 40
  </mark>
  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
</div>

Значение overflow отличное от visible у родителя прячет выходящую за границы часть дочернего элемента с первого экрана видимости.

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 {
  height: 5em;
  border: 1px solid red;
}
.relative {
  position: relative;
  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="relative">Элемент</span>
  28 29 30 31 32 33 34 35 36 37 38 39 40
</div>

Указать родителя, в рамках которого будет перемещаться элемент с 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 70 71
<style>
.raz {
  position: relative;
  border: 1px solid red;
}
.raz div {
  border: 1px solid red;
}
.absolute {
  position: absolute;
  top: 0;
  left: 0;
  background: lightpink;
}
</style>

<div class="raz">
  1 2 3 4 5 6 7 8 9 10
  <div>
    11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
    <span class="absolute">28 Элемент 29</span>
    30 31 32 33 34 35 36 37 38 39 40 41 42
  </div>
  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
</div>
Все комментарии