4.1 absolute positioning
CSS-də absolyut yerləşdirmə (absolute positioning) veb səhifədə elementlərin yerləşdirilməsi üzərində tam idarə etməyə imkan verir. Absolyut yerləşdirmədən istifadə edildikdə element sənədin adi axınından çıxarılır və ən yaxın yerləşdirilmiş ata elementə nisbətən yerləşdirilir. Əgər belə bir ata element olmazsa, element başlanğıc konteynerinə nisbətən yerləşdiriləcək (adətən bu <html> və ya <body> elementidir).
Absolyut yerləşdirmənin əsas xüsusiyyətləri:
- Sənəd axınından çıxarılma: absolyut yerləşdirilmiş elementlər digər elementlərə təsir etmir və valideyn elementlərin ölçülərinin hesablanmasında nəzərə alınmır.
- Nisbi yerləşdirmə: elementlər nisbətən ən yaxın ata elementə (
position: relative,position: absolute,position: fixedvə yaposition: sticky) yerləşdirilir. - Koordinatlardan istifadə:
top,right,bottomvəleftxüsusiyyətləri elementin dəqiq yerini təyin etmək üçün istifadə olunur.
Absolyut yerləşdirmənin sadə bir nümunəsi
Elementin absolyut yerləşdirmə ilə sadə bir nümunəsinə baxaq:
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: deepskyblue;
}
<div class="container">
<div class="box">Absolyut Box</div>
</div>
Bu nümunədə .box elementi, position: relative; xüsusiyyətinə malik olan .container adlı valideyn konteynerinə nisbətən yerləşdirilir.
4.2 Örtüklərin yaradılması (overlaylər)
Absolyut positioning tez-tez örtüklərin yaradılması üçün istifadə olunur, məsələn modallar, tooltiplər və lightboxlar kimi.
Absolyut positioning nümunəsi:
.wrapper {
min-height: 300px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
<div class="wrapper">
<div class="overlay">
<div class="modal">
<p>Modal məzmunu</p>
</div>
</div>
</div>
4.3 Dəqiq layoutlar və interfeys komponentləri
Absolyut mövqeləndirmə media-pleyerlərdə idarəetmə elementləri, istifadəçi idarəetmə elementləri və alətlər paneli kimi dəqiq layoutlar yaratmaq üçün faydalıdır.
Absolyut mövqeləndirmə misalı:
.player {
position: relative;
width: 400px;
height: 50px;
background-color: #333;
color: white;
}
.play-button {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.volume-control {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
<div class="player">
<div class="play-button">Play</div>
<div class="volume-control">Volume</div>
</div>
4.4 Mürəkkəb Maketlərin Yaradılması
Absolyut pozisionlama məlumat panelləri və interaktiv elementlər kimi mürəkkəb maketlərin yaradılmasına imkan verir.
Absolyut pozisionlamanın nümunəsi:
.dashboard {
position: relative;
width: 800px;
height: 600px;
background-color: #f0f0f0;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #333;
color: white;
}
.main-content {
position: absolute;
top: 0;
left: 200px;
width: calc(100% - 200px);
height: 100%;
background-color: #fff;
}
<div class="dashboard">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
GO TO FULL VERSION