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:

<div id="parent">
	<div id="child"></div>
</div>

#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:

<div id="parent">
	<div id="child"></div>
</div>

#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:

<div id="parent">
	<div id="child"></div>
</div>

#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.