Absolutne pozycjonowanie elementów w CSS

W tej lekcji przeanalizujemy absolutne pozycjonowanie elementów. Pozwala ono umieszczać elementy według określonych współrzędnych strony. Na przykład, można umieścić element w pozycji 100px od góry strony i 200px od lewej. Element przeniesie się tam, niezależnie od tego, co się tam znajduje, i po prostu ustawi się na wierzchu innych elementów. Mówi się, że w tym przypadku element wypada z normalnego przepływu dokumentu: wszystkie pozostałe elementy będą zachowywać się tak, jakby naszego elementu nie było.

Aby uczynić element absolutnie spozycjonowanym, temu elementowi należy ustawić właściwość position na wartość absolute. Oprócz tej właściwości, potrzebne są jeszcze dwie: jedna będzie określać współrzędną pionową, a druga - poziomą.

Dla pionu należy ustawić odstęp albo od góry, albo od dołu. Odstęp od góry ustawia właściwość top, a odstęp od dołu - właściwość bottom. Dla poziomu należy ustawić odstęp albo od lewej, albo od prawej. Odstęp od lewej ustawia właściwość left, a odstęp od prawej - właściwość right.

Spójrzmy na przykłady.

Przykład

Na początek zróbmy dwa bloki bez pozycjonowania (zwróć uwagę na to, że elementy nie są dociśnięte do krawędzi okna, ponieważ body ma domyślnie ustawiony margin):

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

Przykład

Teraz ustawmy zielonemu blokowi absolutne pozycjonowanie, umieszczając go w pozycji od góry 150px i od lewej 100px:

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

Przykład

Teraz umieśćmy zielony blok w pozycji 0px od góry i 0px od lewej:

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

Przykład

Teraz umieśćmy zielony blok w pozycji 0px od góry i 0px od prawej:

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

Przykład

Teraz umieśćmy zielony blok w pozycji 0px od dołu i 0px od prawej:

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

Przykład

Teraz umieśćmy zielony blok w pozycji 0px od dołu i 0px od lewej:

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

Zadania praktyczne

Za pomocą absolutnego pozycjonowania rozmieść bloki w następujący sposób: