Positionering i forhold til forælder i CSS

Hvis et element er tildelt relative, og dets afkom - absolute, så vil dette afkom blive positioneret i forhold til sin forælder, og ikke i forhold til browserens vindue.

Som regel angives relative uden forskydninger til forælderen i sådanne tilfælde. I dette tilfælde sker der ikke noget med denne forælder, men alle dens afkom vil nu blive positioneret i forhold til den.

Lad os se på eksempler.

Eksempel

Lad os til at starte med bare lave en forælder-blok og en afkom-blok uden positionering:

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

Результат:

Eksempel

Lad os nu absolut positionere den grønne blok. Da forælderen ikke er tildelt relative, vil afkommet blive positioneret i forhold til browserens vindue:

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

Результат:

Eksempel

Lad os nu tildele forælderen relative. I dette tilfælde vil afkommet blive positioneret i forhold til sin forælder:

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

Результат:

Praktiske opgaver

I de følgende opgaver er hovedblokken centreret ved hjælp af margin med værdien auto, mens de andre er positioneret i forhold til den ved hjælp af egenskaben position.