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