Відносне позиціонування задається зa
допомогою значення 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;
}
:
Змістіть ці блоки за допомогою відносного позиціонування наступним чином: