Релативно позиционирање елемената у CSS-у
Релативно позиционирање се задаје помоћу вредности
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: -40px;
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;
}
:
Померите ове блокове помоћу релативног позиционирања на следећи начин:
