3.1 position: relative
CSS-də nisbi mövqeləndirmə elementi sənəd axınındakı ilkin mövqeyinə nisbətən hərəkət etdirməyə imkan verir. position: relative istifadə edərkən element normal axında öz yerini saxlayır, amma top, right, bottom və left xassələri vasitəsilə elementin mövqeyini dəyişmək mümkündür. Bu xassələr elementi onun normal mövqeyinə nisbətən hərəkət etdirir.
Nisbi mövqeləndirmənin əsas prinsipləri
Nisbi mövqeləndirmədə (position: relative) element sənəd axınındakı ilkin mövqeyindən hərəkət etdirilir. Bu dəyişmə yalnız həmin elementə təsir edir, digər elementlər isə elə bil ki, element hərəkət etməmiş kimi öz yerlərində qalır. Bu, elementlərin bir-birinin üstünü örtməsinə və ya əlavə vizual boşluqlar yaratmasına imkan verir.
Syntax:
.element {
position: relative;
top: value;
right: value;
bottom: value;
left: value;
}
Harada:
top: elementi normal mövqeyinə nisbətən aşağı hərəkət etdirirright: elementi normal mövqeyinə nisbətən sola hərəkət etdirirbottom: elementi normal mövqeyinə nisbətən yuxarı hərəkət etdirirleft: elementi normal mövqeyinə nisbətən sağa hərəkət etdirir<dəyər>: CSS-də istənilən mümkün uzunluq dəyəri ola bilər (px,%,emvə s.)
3.2 Top xassəsi
top xassəsi elementi ilkin mövqeyinə nisbətən aşağı hərəkət etdirir.
top istifadəsinə bir nümunə:
.relative-top {
position: relative;
top: 20px; /* Elementi 20 piksel aşağı hərəkət etdirir */
}
İstifadə nümunəsi:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-top {
position: relative;
top: 20px;
background-color: lightblue;
}
<div class="container">
<div class="box static-box">Bu adi bir blokdur</div>
<div class="box relative-top">Bu blok 20px aşağı hərəkət edəcək.</div>
<div class="box static-box">Bu adi bir blokdur</div>
</div>
3.3 right xüsusiyyəti
right xüsusiyyəti elementi ilkin mövqeyinə görə sola sürüşdürür.
right istifadəsinə nümunə:
.relative-right {
position: relative;
right: 20px; /* Elementi 20 piksel sola sürüşdürür */
}
İstifadə nümunəsi:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-right {
position: relative;
right: 20px;
background-color: lightgreen;
padding: 20px;
}
<div class="container">
<div class="box static-box">Bu adi blokdur</div>
<div class="box relative-right">Bu blok 20px sola sürüşdürüləcək.</div>
<div class="box static-box">Bu adi blokdur</div>
</div>
3.4 Bottom xüsusiyyəti
bottom xüsusiyyəti elementi ilkin mövqeyinə nisbətən yuxarıya doğru hərəkət etdirir.
Bottom-un istifadəsinə nümunə:
.relative-bottom {
position: relative;
bottom: 20px; /* Elementi 20 piksel yuxarı hərəkət etdirir */
}
İstifadəyə nümunə:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-bottom {
position: relative;
bottom: 20px;
background-color: lightcoral;
padding: 20px;
}
<div class="container">
<div class="box static-box">Bu adi blokdur</div>
<div class="box relative-bottom">Bu blok 20px yuxarı hərəkət edəcək.</div>
<div class="box static-box">Bu adi blokdur</div>
</div>
3.5 left Xüsusiyyəti
left xüsusiyyəti elementi onun ilkin mövqeyinə nisbətən sağa çəkir.
left istifadə nümunəsi:
.relative-left {
position: relative;
left: 20px; /* Elementi sağa 20 piksel çəkir */
}
İstifadə nümunəsi:
.container {
min-height: 200px;
}
.box {
padding: 20px;
}
.static-box {
background-color: lightgray;
}
.relative-left {
position: relative;
left: 20px;
background-color: lightgoldenrodyellow;
padding: 20px;
}
<div class="container">
<div class="box static-box">Bu adi bir blokdur</div>
<div class="box relative-left">Bu blok sağa 20px çəkiləcək.</div>
<div class="box static-box">Bu adi bir blokdur</div>
</div>
3.6 Yanaşı elementlərlə qarşılıqlı əlaqə
position: relative olan elementlər sənədin normal axınında qalır, bu o deməkdir ki, onlar yerini saxlayır, elə bil heç bir yerdəyişmə yoxdur. Bu, elementləri digər səhifədəki elementlərin yerləşməsinə təsir etmədən yerdəyişməyə imkan verir.
İstifadə nümunəsi:
.container {
border: 2px solid #000;
padding: 10px;
}
.box {
position: relative;
background-color: #e74c3c;
color: white;
padding: 20px;
margin: 10px;
width: 200px;
}
.box1 {
top: 20px;
}
.box2 {
left: 20px;
}
<div class="container">
<div class="box box1">Element 1 (aşağıya yerdəyişdi)</div>
<div class="box box2">Element 2 (sağa yerdəyişdi)</div>
<div class="box">Element 3 (normal mövqe)</div>
</div>
Kod izahı:
-
.box1: element 20 piksel aşağıya yerdəyişdi, amma normal axında yeri saxlanılır, bu o deməkdir ki, digər elementlər onun ilkin mövqeyinə görə yerləşəcək -
.box2: element 20 piksel sağa yerdəyişdi, amma normal axında yeri saxlanılır
GO TO FULL VERSION