CSSда ота-онага нисбатан позиционлаш

Агар элементга relative берилса, ва унинг фарзанди - absolute бўлса, у ҳолда бу фарзанд браузер дарчасига нисбатан эмас, балки ўзининг ота-онасига нисбатан позиционланади.

Одатда, бундай ҳолда ота-онага ҳаракатларсиз relative кўрсатилади. Бу ҳолда ушбу ота-она бирон нарсага дуч келмайди, лекин унинг барча фарзандлари ҳозир унга нисбатан позиционланади.

Келгила, мисолларда кўрамиз.

Мисол

Бошлаш учун, келгила, позиционлашсиз ота-она ва фарзанд блокларни қилайлик:

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

Результат:

Мисол

Келгила, энди яшил блокни абсолют позиционлаймиз. Ота-онага relative кўрсатилмагани сабабли, фарзанд браузер дарчасига нисбатан позиционланади:

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

Результат:

Мисол

Энди ота-онага relative кўрсатамиз. Бу ҳолда фарзанд ўзининг ота-онасига нисбатан позиционланади:

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

Результат:

Амалий вазифалар

Келгуси вазифаларда асосий блок margin воситасида auto қиймати билан марказда туради, қолганлари эса position хусусияти ёрдамида унга нисбатан позиционланади.