8.1 Normal axın
CSS-də elementlərin yerləşdirilməsi, onların veb-səhifədəki yerlərini və qarşılıqlı əlaqələrini idarə etməkdə əsas rol oynayır. Bu, elementlərin digərlərinə və öz konteynerinə nisbətən necə yerləşdirildiyini müəyyən edir. Gəlin, müxtəlif yerləşdirmə növlərinin elementlərin axınına necə təsir etdiyini nəzərdən keçirək.
Sənəd axını və yerləşdirmə
Sənədin normal axınında elementlər HTML kodunda göstərilən qaydaya uyğun olaraq bir-birinin ardınca yerləşdirilir. Blok elementləri (məsələn, <div>, <p>, <h1>) şaquli olaraq yerləşir, valideyn konteynerinin bütün enini tuturlar, sətir elementləri isə (məsələn, <span>, <a>, <em>) üfüqi olaraq yerləşir və yalnız lazım olan sahəni tuturlar.
Nümunə:
.block {
background-color: lightblue;
margin: 10px;
padding: 10px;
}
.inline {
background-color: lightcoral;
margin: 5px;
padding: 5px;
}
<div class="block">Blok elementi</div>
<span class="inline">Sətir elementi</span>
<span class="inline">Sətir elementi</span>
8.2 Mövqe təyin etmənin sənəd axınına təsiri
Müxtəlif mövqe təyin etmə növləri sənədin standart axınını dəyişdirə bilər. Görək, bu necə baş verir:
Static mövqe təyin etmə
Static mövqe təyin etmə, standart dəyərdir və sənədin normal axınına təsir etmir. position: static ilə təyin edilmiş elementlər HTML işarələməsində göstərilən qaydada yerləşdirilir.
Axına təsir:
- Elementlər normal axında qalır
- Elementlər HTML-dən alınan sıraya uyğun yerləşdirilir
Relative mövqe təyin etmə
position: relative ilə təyin olunmuş elementlər normal axında qalır, amma mövqeləri top, right, bottom, left xüsusiyyətləri ilə dəyişdirilə bilər. Yerdəyişmə digər elementlərin mövqelərinə təsir etmir.
Axına təsir:
- Elementlər normal axında qalır
- Elementin yerdəyişməsi qonşu elementlərin yerləşdirilməsinə təsir etmir
Absolute mövqe təyin etmə
position: absolute ilə təyin olunmuş elementlər sənədin normal axınından çıxarılır və ən yaxın mövqeləndirilmiş ata elementi nisbətində yerləşdirilir. Əgər belə bir ata element yoxdursa, onlar başlanğıc konteynerə (<html> və ya <body>) nisbətən yerləşdirilir.
Axına təsir:
- Elementlər normal axından çıxarılır
- Ən yaxın mövqeləndirilmiş ata elementi nisbətində yerləşdirilir
- Digər elementlər bu elementlər yoxmuş kimi hərəkət edir
Fixed mövqe təyin etmə
position: fixed ilə təyin olunmuş elementlər normal axından çıxarılır və brauzer pəncərəsinə nisbətində yerləşdirilir. Səhifə sürüşdürülərkən onlar yerində qalır.
Axına təsir:
- Elementlər normal axından çıxarılır
- Brauzer pəncərəsinə nisbətində yerləşdirilir
- Səhifə sürüşdürülərkən yerində qalır
- Digər elementlər bu elementlər yoxmuş kimi hərəkət edir
Sticky mövqe təyin etmə
position: sticky ilə təyin olunmuş elementlər sürüşdürmə həddinə çatana qədər nisbətən mövqelənmiş kimi davranır, həddə çatdıqdan sonra isə fixed kimi olur.
Axına təsir:
- Elementlər sürüşdürmə həddinə çatana qədər normal axında qalır
- Həddə çatdıqdan sonra element möhkəmlənir və daha normal axına təsir etmir
8.3 Axın təsirlərinə vizual nümunələr
1. Fiksasiya olunmuş vəziyyətlə nümunə:
.wrapper {
height: 200px;
overflow: auto;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightcoral;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="fixed">Fiksasiya olunmuş element</div>
<div class="content">Sürüşdürülə bilən kontent
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
2. Yapışqan vəziyyət nümunəsi:
.wrapper {
height: 200px;
overflow: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: lightgreen;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
<div class="wrapper">
<div class="sticky">Yapışqan element</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
GO TO FULL VERSION