CSSda ota-ona nisbatan pozitsiyalash

Agar elementga relative berilsa, va uning avlodiga - absolute berilsa, bu avlod brauzer oynasiga nisbatan emas, balki o‘z ota-onasiga nisbatan pozitsiyalanadi.

Odatda, bunday holda ota-onga siljishlarsiz relative beriladi. Bu holda ota-bilan hech narsa bo‘lmaydi, lekin uning barcha avlodlari endi unga nisbatan pozitsiyalanadi.

Keling, misollar bilan ko‘ramiz.

Misol

Boshlanish uchun keling, pozitsiyalashsiz ota-ona bloki va avlod bloki yasaymiz:

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

Результат:

Misol

Keling, endi yashil blokni absolyut pozitsiyalaymiz. Ota-onga relative berilmagani sababli, avlod brauzer oynasiga nisbatan pozitsiyalanadi:

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

Результат:

Misol

Endi ota-onga relative beramiz. Bu holda avlod o‘z ota-onasiga nisbatan pozitsiyalanadi:

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

Результат:

Amaliy vazifalar

Quyidagi vazifalarda asosiy blok auto qiymatiga ega margin yordamida markazda turadi, qolganlari esa position xususiyati yordamida unga nisbatan pozitsiyalanadi.