CSS-de ata-enelerine göre pozisionirläň

Eger elemente relative berlen bolsa we onuň çagasyna - absolute, onda bu çaga öz ata-enesine garanyňda, brauzer penjiresine garanyňda däl pozisionirler.

Adatça, şeýle ýagdaýda ata-ene üçin ýer çalşyrmasyz relative görkezilýär. Bu ýagdaýda bu ata-ene bilen hiç zat bolmaýar, ýöne onuň ähli çagalary indi onuň üçin pozisionirler bolar.

Geliň mysallara seredeliň.

Mysal

Başlangyç üçin geliň diňe ata-ene bloguny ýasaýaly we çaga bloguny pozisionirlemezden:

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

Результат:

Mysal

Indi geliň ýaşyl blogy absolýut pozisionirleýäli. Ata-ene üçin relative görkezilmedigi üçin, çaga brauzer penjiresine garanyňda pozisionirler:

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

Результат:

Mysal

Indi ata-ene üçin relative görkezeliň. Bu ýagdaýda çaga öz ata-enesine garanyňda pozisionirler:

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

Результат:

Amaly wezipeler

Aşakdaky wezipelerde esasy blog merkezde margin bahasy arkaly durýar auto, galanlary bolsa özüne garanyňda position häsiýeti arkaly pozisionirler.