Pozicionavimas CSS lygmenyje, atsižvelgiant į pirminį elementą

Jei elementui nustatyta relative, o jo palikuoniui - absolute, tai šis palikuonis bus pozicionuojamas atsižvelgiant į savo pirminį elementą, o ne atsižvelgiant į naršyklės langą.

Paprastai tokiu atveju pirminiam elementui nurodoma relative be poslinkių. Tokiu atveju su šiuo pirminiu elementu nieko neatsitinka, tačiau visi jo palikuoniai dabar bus pozicionuojami atsižvelgiant į jį.

Pažiūrėkime į pavyzdžius.

Pavyzdys

Pirmiausia tiesiog sukurkime pirminį bloką ir palikuonio bloką be pozicionavimo:

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

Результат:

Pavyzdys

Dabar absoliučiai apibrėžkime žaliojo bloko poziciją. Kadangi pirminiam elementui nenurodyta relative, palikuonis bus pozicionuojamas atsižvelgiant į naršyklės langą:

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

Результат:

Pavyzdys

Dabar nurodykime pirminiam elementui relative. Tokiu atveju palikuonis bus pozicionuojamas atsižvelgiant į savo pirminį elementą:

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

Результат:

Praktinės užduotys

Šiose užduotyse pagrindinis blokas yra centre naudojant margin su reikšme auto, o likusieji yra pozicionuojami atsižvelgiant į jį naudojant savybę position.