Pozicionēšana attiecībā pret vecāku elementu CSS

Ja elementam ir iestatīts relative, un tā pēctecim - absolute, tad šis pēctecis tiks pozicionēts attiecībā pret savu vecāku, nevis attiecībā pret pārlūkprogrammas logu.

Parasti šajā gadījumā vecākam tiek norādīts relative bez nobīdēm. Šajā gadījumā ar šo vecāku nekas nenotiek, bet visi tā pēcteči tagad tiks pozicionēti attiecībā pret to.

Apskatīsim piemērus.

Piemērs

Sākumā vienkārši izveidosim vecāka bloku un pēcteča bloku bez pozicionēšanas:

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

Результат:

Piemērs

Tagad absolūti novietosim zaļo bloku. Tā kā vecākam nav norādīts relative, pēctecis tiks pozicionēts attiecībā pret pārlūkprogrammas logu:

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

Результат:

Piemērs

Tagad norādīsim vecākam relative. Šajā gadījumā pēctecis tiks pozicionēts attiecībā pret savu vecāku:

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

Результат:

Praktiskie uzdevumi

Nākamajos uzdevumos galvenais bloks atrodas centrā, izmantojot margin ar vērtību auto, bet pārējie tiek pozicionēti attiecībā pret to, izmantojot īpašību position.