CSS-də valideynə nisbətən pozisioninq

Əgər elementə relative təyin edilibsə və onun nəslindən olan elementə - absolute, onda bu nəsil öz valideyninə nisbətən pozisionlaşacaq, brauzerin pəncərəsinə nisbətən deyil.

Bir qayda olaraq, belə bir halda valideynə heç bir yerdəyişmə olmadan relative göstərilir. Bu halda valideynlə heç nə baş vermir, lakin onun bütün nəsilləri indi ona nisbətən pozisionlaşacaq.

Gəlin nümunələrə baxaq.

Nümunə

Əvvəlcə gəlin heç bir pozisioninq olmadan valideyn bloku və nəsil bloku edək:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Nümunə

İndi gəlin yaşıl bloku mütləq şəkildə pozisionlaşdıraq. Valideynə relative göstərilmədiyi üçün, nəsil brauzerin pəncərəsinə nisbətən pozisionlaşacaq:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Nümunə

İndi valideynə relative göstərək. Bu halda nəsil öz valideyninə nisbətən pozisionlaşacaq:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid red;
}
#child {
  position: absolute;
  top: 20px;
  left: 20px;
  
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

Результат:

Praktiki tapşırıqlar

Aşağıdakı tapşırıqlarda əsas blok margin xassəsindən auto qiymətində istifadə etməklə mərkəzləşdirilib, qalanları isə position xassəsindən istifadə etməklə ona nisbətən pozisionlaşır.