Względne pozycjonowanie elementów w CSS

Względne pozycjonowanie jest ustawiane za pomocą wartości relative dla właściwości position. Takie pozycjonowanie pozwala przesuwać elementy względem ich aktualnego położenia o zadaną wielkość. Jednocześnie wszystkie pozostałe elementy strony będą "myśleć", że element znajduje się tam, gdzie był początkowo. Oznacza to, że przy tym typie pozycjonowania element nie wypada z normalnego przepływu.

Przesunięcia od aktualnego położenia są zadawane właściwościami top, right, bottom i left.

Przykład

Na początek zróbmy po prostu dwa bloki bez pozycjonowania:

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

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

Przykład

Dodajmy teraz pierwszemu blokowi relative. Na razie nic się nie zmieni, ponieważ nie określiliśmy przesunięcia bloku:

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

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

Przykład

Odsuńmy teraz nasz bloczek o 30px od góry, podając mu właściwość top. Przy tym wszystkie pozostałe elementy będą zachowywać się tak, jakby nasz bloczek pozostał w miejscu, gdzie był początkowo:

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

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

Przykład

Odsuńmy również nasz bloczek o 40px z lewej strony, podając mu właściwość left:

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

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

Przykład

Ujemne wartości właściwości top, right, bottom i left przesuwają w przeciwnym kierunku. Na przykład, dodatnia wartość top przesuwa w dół, a ujemna - w górę.

Odsuńmy nasz drugi bloczek o 40px w górę, podając mu ujemną wartość właściwości top:

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

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	position: relative;
	top: -40px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Zadania praktyczne

Dane są następujące bloki:

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

#elem1 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #FF8888;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #7E89EB;
}
#elem3 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #4DEE99;
}

Przesuń te bloki za pomocą względnego pozycjonowania w następujący sposób: