Absolut positionering av element i CSS

I den här lektionen kommer vi att analysera absolut positionering av element. Det tillåter placering av element vid angivna koordinater på sidan. Till exempel kan man placera ett element i positionen 100px från sidans överkant och 200px från vänster. Elementet kommer att flyttas dit, oavsett vad andra element som finns där och kommer helt enkelt att hamna ovanpå dem. Man säger att elementet i detta fall lyfts ur det normala dokumentflödet: alla andra element kommer att bete sig som vårt element inte finns där.

För att göra ett element absolut positionerat måste elementet ges egenskapen position med värdet absolute. Förutom denna egenskap behövs ytterligare två: en för att ange koordinaten i vertikal led, och den andra - i horisontell led.

För vertikalen måste man ange avstånd antingen från toppen, eller från botten. Avstånd från toppen sätts med egenskapen top, och avstånd från botten - med egenskapen bottom. För horisontalen måste man ange avstånd antingen från vänster, eller från höger. Avstånd från vänster sätts med egenskapen left, och avstånd från höger - med egenskapen right.

Låt oss titta på exempel.

Exempel

Låt oss först skapa två block utan positionering (observera att elementen inte är tryckta mot kanten av fönstret, eftersom body har margin som standard):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Exempel

Låt oss nu ge det gröna blocket absolut positionering, genom att placera det i positionen 150px från toppen och 100px från vänster:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Exempel

Låt oss nu placera det gröna blocket i positionen 0px från toppen och 0px från vänster:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Exempel

Låt oss nu placera det gröna blocket i positionen 0px från toppen och 0px från höger:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Exempel

Låt oss nu placera det gröna blocket i positionen 0px från botten och 0px från höger:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Exempel

Låt oss nu placera det gröna blocket i positionen 0px från botten och 0px från vänster:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Praktiska uppgifter

Med absolut positionering, placera blocken på följande sätt: