Posisionering relatief tot die ouer in CSS

As 'n element relative toegeken word, en sy nakomeling - absolute, dan sal hierdie nakomeling posisioneer relatief tot sy ouer, en nie relatief tot die leser se venster nie.

Gewoonlik word in so 'n geval die ouer gespesifiseer relative sonder verskuiwings. In hierdie geval gebeur niks met hierdie ouer nie, maar al sy nakomelinge sal nou relatief tot hom posisioneer.

Kom ons kyk na voorbeelde.

Voorbeeld

Om mee te begin, laat ons net 'n ouerblok en 'n nakomelingblok sonder posisionering maak:

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

Результат:

Voorbeeld

Laat ons nou die groen blok absoluut posisioneer. Aangesien die ouer nie relative toegeken is nie, sal die nakomeling posisioneer relatief tot die leser se venster:

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

Результат:

Voorbeeld

Laat ons nou die ouer relative toewys. In hierdie geval sal die nakomeling posisioneer relatief tot sy ouer:

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

Результат:

Praktiese take

In die volgende take is die hoofblok in die middel geplaas met behulp van margin met die waarde auto, en die ander word geposisioneer relatief tot dit met behulp van die eienskap position.