CSS-də elementlərin nisbi pozisionlasdirilmasi
Nisbi pozisionlasdirmə position xassəsi üçün
relative dəyəri ilə təyin olunur. Bu cür pozisionlasdirmə
elementlərin öz cari mövqeyindən müəyyən bir miqdarda sürüşdürülməsinə
imkan verir. Eyni zamanda səhifənin digər bütün elementləri elementin
əvvəlki yerində durduğunu düşünəcək. Yəni bu cür pozisionlasdirmada
element normal axından çıxmır.
Cari mövqedən olan sürüşmələr top, right,
bottom və left xassələri ilə təyin olunur.
Nümunə
Əvvəlcə gəlin heç bir pozisionlasdirmə olmadan iki blok düzəldək:
<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;
}
:
Nümunə
İndi birinci bloka relative əlavə edək.
Bu, hələlik heç nəyi dəyişməyəcək, çünki biz
blokun sürüşməsini göstərməmişik:
<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;
}
:
Nümunə
Gəlin indi blokumuzu yuxarıdan 30px
sürüşdürək, ona top xassəsini təyin edərək.
Bu zaman digər bütün elementləri blokumuzun
əvvəlki yerində qaldığını güman edəcək:
<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;
}
:
Nümunə
Gəlin həmçinin blokumuzu soldan 40px
sürüşdürək, ona left xassəsini təyin edərək:
<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;
}
:
Nümunə
top, right, bottom və
left xassələrinin mənfi dəyərləri əks
istiqamətdə sürüşdürür. Məsələn, top-in
müsbət dəyəri aşağı, mənfi dəyəri isə yuxarı sürüşdürür.
Gəlin ikinci blokumuzu yuxarı 40px
sürüşdürək, ona top xassəsinin mənfi dəyərini təyin edərək:
<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;
}
:
Praktiki tapşırıqlar
Aşağıdakı bloklar verilmişdir:
<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;
}
:
Bu blokları nisbi pozisionlasdirmadan istifadə edərək aşağıdakı kimi sürüşdürün:
