3.1 position: relative
Относительное позиционирование в CSS позволяет элементам перемещаться относительно их первоначального положения в потоке документа. При использовании position: relative элемент сохраняет свое место в нормальном потоке, но можно смещать его с помощью свойств top, right, bottom и left. Эти свойства позволяют сдвигать элемент относительно его обычного положения.
Основные принципы относительного позиционирования
При относительном позиционировании (position: relative) элемент перемещается из своего исходного положения в потоке документа. Это смещение влияет только на сам элемент, а другие элементы остаются на своих местах, как если бы элемент не был перемещен. Это позволяет создавать эффекты, где элементы перекрывают друг друга или создают дополнительные визуальные отступы.
Синтаксис:
.element {
position: relative;
top: value;
right: value;
bottom: value;
left: value;
}
Где:
top: смещает элемент вниз относительно его нормального положенияright: смещает элемент влево относительно его нормального положенияbottom: смещает элемент вверх относительно его нормального положенияleft: смещает элемент вправо относительно его нормального положения<значение>: может быть любым допустимым значением длины в CSS (px,%,emи т. д.)
3.2 Свойство top
Свойство top сдвигает элемент вниз относительно его первоначального положения.
Пример использования top:
.relative-top {
position: relative;
top: 20px; /* Сдвигает элемент вниз на 20 пикселей */
}
Пример использования:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-top {
position: relative;
top: 20px;
background-color: lightblue;
}
<div class="container">
<div class="box static-box">Это обычный блок</div>
<div class="box relative-top">Этот блок будет смещен вниз на 20px.</div>
<div class="box static-box">Это обычный блок</div>
</div>
3.3 Свойство right
Свойство right сдвигает элемент влево относительно его первоначального положения.
Пример использования right:
.relative-right {
position: relative;
right: 20px; /* Сдвигает элемент влево на 20 пикселей */
}
Пример использования:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-right {
position: relative;
right: 20px;
background-color: lightgreen;
padding: 20px;
}
<div class="container">
<div class="box static-box">Это обычный блок</div>
<div class="box relative-right">Этот блок будет смещен влево на 20px.</div>
<div class="box static-box">Это обычный блок</div>
</div>
3.4 Свойство bottom
Свойство bottom сдвигает элемент вверх относительно его первоначального положения.
Пример использования bottom:
.relative-bottom {
position: relative;
bottom: 20px; /* Сдвигает элемент вверх на 20 пикселей */
}
Пример использования:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-bottom {
position: relative;
bottom: 20px;
background-color: lightcoral;
padding: 20px;
}
<div class="container">
<div class="box static-box">Это обычный блок</div>
<div class="box relative-bottom">Этот блок будет смещен вверх на 20px.</div>
<div class="box static-box">Это обычный блок</div>
</div>
3.5 Свойство left
Свойство left сдвигает элемент вправо относительно его первоначального положения.
Пример использования left:
.relative-left {
position: relative;
left: 20px; /* Сдвигает элемент вправо на 20 пикселей */
}
Пример использования:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-left {
position: relative;
left: 20px;
background-color: lightgoldenrodyellow;
padding: 20px;
}
<div class="container">
<div class="box static-box">Это обычный блок</div>
<div class="box relative-left">Этот блок будет смещен вправо на 20px.</div>
<div class="box static-box">Это обычный блок</div>
</div>
3.6 Взаимодействие со смежными элементами
Элементы с position: relative остаются в нормальном потоке документа, что означает, что они по-прежнему занимают пространство, которое было бы занято, если бы они не были смещены. Это позволяет смещать элементы без изменения расположения других элементов на странице.
Пример использования:
.container {
border: 2px solid #000;
padding: 10px;
}
.box {
position: relative;
background-color: #e74c3c;
color: white;
padding: 20px;
margin: 10px;
width: 200px;
}
.box1 {
top: 20px;
}
.box2 {
left: 20px;
}
<div class="container">
<div class="box box1">Элемент 1 (смещен вниз)</div>
<div class="box box2">Элемент 2 (смещен вправо)</div>
<div class="box">Элемент 3 (нормальное положение)</div>
</div>
Объяснение кода:
-
.box1: элемент смещен вниз на 20 пикселей, но его место в нормальном потоке остается, что означает, что другие элементы будут располагаться относительно его исходного положения -
.box2: элемент смещен вправо на 20 пикселей, но его место в нормальном потоке остается
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ