Относительное позиционирование задается с
помощью значения relative для свойства
position. Такое позиционирование позволяет
сдвигать элементы относительно своего текущего
положения на заданную величину. При этом
все остальные элементы страницы будут думать,
что элемент стоит там, где и стоял изначально.
То есть при таком типе позиционирования элемент
не выпадает из нормального потока.
Смещения от текущего положения задаются свойствами
top, right, bottom и
left.
Пример
Для начала давайте просто сделаем два блока без позиционирования:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Пример
Добавим теперь первому блоку relative.
От этого пока ничего не поменяется, так как
мы не указали смещение блока:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Пример
Давайте теперь отодвинем наш блок на 30px
сверху, указав ему свойство top. При
этом все остальные элементы будут вести себя
так, будто наш блок остался том месте, где
был изначально:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
top: 30px;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Пример
Давайте также отодвинем наш блок на 40px
слева, указав ему свойство left:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
position: relative;
top: 30px;
left: 40px;
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Пример
Отрицательные значения свойств top, right, bottom и left сдвигают в противоположном направлении. К примеру, положительное значение top сдвигает вниз, а отрицательное - вверх.
Давайте отодвинем наш второй блок на 40px
вверх, указав ему отрицательное значение
свойства top:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
border: 1px solid green;
}
#elem2 {
position: relative;
top: -30px;
left: 20px;
width: 200px;
height: 200px;
border: 1px solid red;
}
:
Практические задачи
Даны следующие блоки:
<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text
#elem1 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #FF8888;
}
#elem2 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #7E89EB;
}
#elem3 {
width: 100px;
height: 100px;
margin-bottom: 20px;
background-color: #4DEE99;
}
:
Сместите эти блоки с помощью относительного позиционирования следующим образом: