Właściwość position

Właściwość position określa sposób pozycjonowania elementów. Właściwość ta jest najczęściej używana razem z właściwościami top, right, bottom, left, które ustawiają odpowiednio odstępy od góry, prawej, dołu i lewej strony.

Składnia

selektor {
	position: absolute | relative | fixed | static | sticky;
}

Wartości dla position

Wartość	Opis
`absolute`	Pozycjonowanie absolutne. Element jest usuwany z normalnego przepływu dokumentu i pozycjonowany względem najbliższego pozycjonowanego przodka (jeśli istnieje) lub względem okna przeglądarki.
`relative`	Pozycjonowanie względne. Element jest przesunięty względem swojej normalnej pozycji w przepływie dokumentu, ale przestrzeń, którą zajmował, pozostaje zarezerwowana.
`fixed`	Pozycjonowanie stałe. Element jest usuwany z normalnego przepływu dokumentu i pozycjonowany względem okna przeglądarki. Pozostaje w miejscu podczas przewijania strony.
`static`	Pozycjonowanie statyczne. Wartość oznacza brak pozycjonowania i element zachowuje się normalnie.
`sticky`	Pozycjonowanie przylegające. Element zachowuje się jak `relative`, aż do osiągnięcia określonej pozycji podczas przewijania, po czym przylega do wskazanego miejsca (jak `fixed`).

Wartość domyślna: static.

Przykład . Pozycjonowanie absolutne

Umieśćmy element w lewym górnym rogu ekranu z małymi odstępami:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Przykład . Pozycjonowanie absolutne

A teraz umieśćmy element w prawym górnym rogu ekranu z małymi odstępami:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: absolute;
	top: 40px;
	right: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Przykład . Pozycjonowanie stałe

Przy pozycjonowaniu stałym element będzie pozostawał w miejscu podczas przewijania:

<div class="elem"></div>

<div class="main">
	some long text
</div>

.elem {
	position: fixed;
	top: 40px;
	left: 50px;
	width: 100px;
	height: 100px;
	background-color: #98fb98;
}

.main {
	width: 400px;
	text-align: justify;
	margin: 20px auto;
}

Przykład . Pozycjonowanie względne

Przy pozycjonowaniu względnym element jest przesunięty względem swojej normalnej pozycji, ale pozostałe elementy zachowują się tak, jakby element nie był przesunięty:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	display: flex;
	justify-content: flex-row;
}

.elem {
	margin: 0 3px;
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

.elem2 {
	position: relative;
	top: 20px;
	left: 30px;
	background-color: #e6addf;
}

Przykład . Zagnieżdżenie

Jeśli rodzic ma właściwość position ustawioną na wartość relative, wtedy elementy pozycjonowane absolutnie będą pozycjonowane względem rodzica:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Przykład . Zagnieżdżenie

Jeśli rodzic ma właściwość position ustawioną na wartość absolute, wtedy elementy pozycjonowane absolutnie będą pozycjonowane względem rodzica:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: absolute;
	top: 30px;
	left: 30px;
	
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 0px;
	right: 0px;
	
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Przykład . Pozycjonowanie przylegające

Jeśli dla elementu właściwość position ma wartość sticky, to element zachowuje się jak relative, aż do osiągnięcia określonej pozycji podczas przewijania, po czym przylega do miejsca. Stwórzmy przylegający nagłówek:

<h1>Main Site Header</h1>

<div class="header">header header header</div>

<div class="main">
	some long text
</div>

h1 {
	text-align: center;
}

.header {
	position: sticky;
	top: 0;
	
	padding: 20px;
	background: #f0f0f0;
	text-align: center;
	font-weight: bold;
}

.main {
	width: 400px;
	margin: 20px auto;
	border: 1px solid #ccc;
	padding: 20px;
	text-align: justify;
}

Przykład . Bez pozycji

Jeśli elementowi ustawimy pozycjonowanie absolutne bez podania pozycji, to element pozostanie w miejscu, gdzie stał bez pozycjonowania, ale pozostałe elementy przestaną go zauważać:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Przykład . Jedna oś

Przy pozycjonowaniu absolutnym można ustawić pozycję tylko wzdłuż jednej osi. Na przykład, jeśli ustawimy właściwość top, to w pionie element ustawi się w odpowiedną pozycję, a w poziomie pozostanie tam, gdzie stał:

<div class="container">
	<div class="elem elem1"></div>
	<div class="elem elem2"></div>
	<div class="elem elem3"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	display: inline-block;
}

.elem2 {
	position: absolute;
	top: 20px;
	
	width: 50px;
	height: 50px;
	background-color: #e6addf;
}
.elem1, .elem3 {
	width: 100px;
	height: 100px;
	background-color: #add8e6;
}

Przykład . Wszystkie pozycje

Przy pozycjonowaniu absolutnym można ustawić pozycje ze wszystkich stron, bez podawania szerokości i wysokości. W tym przypadku element ustawi się na środku bloku rodzica:

<div class="container">
	<div class="elem"></div>
</div>

.container {
	position: relative;
	border: 1px solid red;
	width: 500px;
	height: 300px;
}

.elem {
	position: absolute;
	top: 20px;
	bottom: 20px;
	left: 20px;
	right: 20px;
	background-color: #add8e6;
}

Zobacz też

właściwość z-index,
która określa nakładanie się elementów