Xüsusiyyət position

Xüsusiyyət position elementlərin pozisionlanma üsulunu təyin edir. Bu xüsusiyyət ən çox top, right, bottom, left xüsusiyyətləri ilə birlikdə istifadə olunur, ki onlar da yuxarıdan, sağdan, aşağıdan və soldan aralıqları müvafiq olaraq təyin edirlər.

Sintaksis

cssselektor {
  position: absolute | relative | fixed | static | sticky;
}

Position üçün dəyərlər

Susmaya görə dəyər: static.

Nümunə . Absolyut pozisionlama

Elementi kiçik aralıqlarla ekranın yuxarı sol küncündə yerləşdirək:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Nümunə . Absolyut pozisionlama

İndi isə elementi kiçik aralıqlarla ekranın yuxarı sağ küncündə yerləşdirək:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: absolute;
  top: 40px;
  right: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Nümunə . Fiksə edilmiş pozisionlama

Fiksə edilmiş pozisionlama zamanı element sürüşdürmə zamanı yerində qalacaq:

html<div class="elem"></div>

<div class="main">
  some long text
</div>

css.elem {
  position: fixed;
  top: 40px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: #98fb98;
}

.main {
  width: 400px;
  text-align: justify;
  margin: 20px auto;
}

Результат:

Nümunə . Nisbi pozisionlama

Nisbi pozisionlama zamanı element öz normal mövqeyinə nisbətən yerdəyişir, lakin digər elementlər elə davranırlar, sanki element yerdəyişməyib:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  display: flex;
  justify-content: flex-row;
}

.elem {
  margin: 0 3px;
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

.elem2 {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: #e6addf;
}

Результат:

Nümunə . İç-içəlik

Əgər ata elementin position xüsusiyyətinin dəyəri relative olarsa, onda absolyut pozisionlanmış elementlər ata elementə nisbətən yerləşəcəklər:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Nümunə . İç-içəlik

Əgər ata elementin position xüsusiyyətinin dəyəri absolute olarsa, onda absolyut pozisionlanmış elementlər ata elementə nisbətən yerləşəcəklər:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: absolute;
  top: 30px;
  left: 30px;
  
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 0px;
  right: 0px;
  
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Nümunə . Yapışan pozisionlama

Əgər element üçün position xüsusiyyətinin dəyəri sticky olarsa, onda element sürüşdürmə zamanı müəyyən edilmiş mövqeyə çatana qədər relative kimi davranır, bundan sonra isə yerə yapışır. Gəlin yapışan başlıq edək:

html<h1>Əsas Sayt Başlığı</h1>

<div class="header">başlıq başlıq başlıq</div>

<div class="main">
  some long text
</div>

cssh1 {
  text-align: center;
}

.header {
  position: sticky;
  top: 0;
  
  padding: 20px;
  background: #f0f0f0;
  text-align: center;
  font-weight: bold;
}

.main {
  width: 400px;
  margin: 20px auto;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: justify;
}

Результат:

Nümunə . Pozisiyasız

Əgər elementə pozisiyası göstərilmədən absolyut pozisionlama verilsə, onda element pozisionlanma olmadan dayandığı yerdə qalacaq, lakin digər elementlər onu his etməyi dayandıracaq:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Nümunə . Bir ox

Absolyut pozisionlama zamanı yalnız bir ox üzrə pozisiya təyin etmək olar. Məsələn, əgər biz top xüsusiyyətini təyin etsək, onda şaquli istiqamətdə element tələb olunan pozisiyada duracaq, üfüqi istiqamətdə isə dayandığı yerdə qalacaq:

html<div class="container">
  <div class="elem elem1"></div>
  <div class="elem elem2"></div>
  <div class="elem elem3"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  display: inline-block;
}

.elem2 {
  position: absolute;
  top: 20px;
  
  width: 50px;
  height: 50px;
  background-color: #e6addf;
}
.elem1, .elem3 {
  width: 100px;
  height: 100px;
  background-color: #add8e6;
}

Результат:

Nümunə . Bütün pozisiyalar

Absolyut pozisionlama zamanı eni və hündürlüyü təyin etmədən bütün tərəflərdən pozisiyalar təyin etmək olar. Bu zaman element ata blokun mərkəzində duracaq:

html<div class="container">
  <div class="elem"></div>
</div>

css.container {
  position: relative;
  border: 1px solid red;
  width: 500px;
  height: 300px;
}

.elem {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background-color: #add8e6;
}

Результат:

Həmçinin bax