Posisjonering i forhold til forelder i CSS

Hvis et element er gitt relative, og dets avkom - absolute, vil dette avkommet blitt posisjonert i forhold til sin forelder, og ikke i forhold til nettleservinduet.

Som regel, i slike tilfeller, angis relative uten forskyvninger til forelderen. I dette tilfellet skjer det ingenting med denne forelderen, men alle dens avkom vil nå bli posisjonert i forhold til den.

La oss se på eksempler.

Eksempel

La oss først bare lage en forelder-blokk og et avkom-blokk uten posisjonering:

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

La oss nå absolutt posisjonere den grønne blokken. Siden forelderen ikke har fått relative, vil avkommet bli posisjonert i forhold til nettleservinduet:

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

La oss nå angi relative til forelderen. I dette tilfellet vil avkommet bli posisjonert i forhold til sin forelder:

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 oppgaver

I de følgende oppgavene er hovedblokken plassert i senter ved hjelp av margin med verdien auto, mens de andre er posisjonert i forhold til den ved hjelp av egenskapen position.