Элемент с position: relative; смещается на расстояние, указанное в свойствах top, right, bottom, left, от своего первоначального расположения. Размещение элемента над другими элементами правится с помощью свойства z-index.
После того, как свойство position примет значение relative, размер элемента не изменится, а соседние элементы не сдвинутся на освободившееся пространство.
Переместить элемент над другими элементами
Чтобы элемент «2» спрятался под другой часто неподвижный элемент «1», можно элементу «1» указать position: relative;, при котором не игнорируется свойство z-index.
<style>
.relative {
background: lightpink;
}
.margin {
margin-left: -5em;
background: lightcyan;
}
</style>
<span class="relative">Элемент «1»</span>
<span class="margin">Элемент «2»</span>Большое количество контекста наложения усложняет работу, поэтому лучше не применять z-index там, где без него можно обойтись.
<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
Cвойства top, right, bottom, left могут иметь как положительные, так и отрицательные значения в любых единицах измерения, а также в процентах. По умолчанию у них установлено значение auto.
<style>
.relative {
background: lightpink;
}
</style>
<span class="relative">Элемент</span>Элемент с top: -4em; примет то же положение, что и с bottom: 4em;. Элемент с left: -4em; примет то же положение, что и с right: 4em;.
<style>
.relative {
position: relative;
top: -4em;
background: lightpink;
}
</style>
<span class="relative">Элемент</span>При одновременном использовании свойств top и bottom, свойство bottom игнорируется. При одновременном использовании свойств left и right, свойство right игнорируется.
<style>
.relative {
position: relative;
background: lightpink;
}
</style>
<span class="relative">Элемент</span>Значения свойств top и bottom в процентах рассчитываются от высоты содержимого ближайшего не inline родителя, у которого height не auto.
<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 в процентах у ближайших потомков.
<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 родителя.
<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 родителя.
<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 у родителя прячет выходящую за границы часть дочернего элемента с первого экрана видимости.
<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;
<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>