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:

html<div id="elem1"></div>
<div id="elem2"></div>

css#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:

html<div id="elem1"></div>
<div id="elem2"></div>

css#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:

html<div id="elem1"></div>
<div id="elem2"></div>

css#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:

html<div id="elem1"></div>
<div id="elem2"></div>

css#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:

html<div id="elem1"></div>
<div id="elem2"></div>

css#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

html<div id="elem1"></div>
<div id="elem2"></div>
<div id="elem3"></div>
text text text

css#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;
}