Īpašība position

Īpašība position nosaka elementu pozicionēšanas veidu. Šī īpašība visbiežāk tiek lietota kopā ar īpašībām top, right, bottom, left, kas attiecīgi nosaka atkāpes no augšas, labās puses, apakšas, kreisās puses.

Sintakse

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

Vērtības priekš position

Vērtība	Apraksts
`absolute`	Absolūta pozicionēšana. Elements tiek noņemts no parastā dokumenta plūsmas un tiek pozicionēts attiecībā pret tuvāko pozicionēto priekšteci (ja tāds ir) vai attiecībā pret pārlūkloga logu.
`relative`	Relatīva pozicionēšana. Elements tiek pārvietots attiecībā pret savu normālo stāvokli dokumenta plūsmā, bet telpa, ko tas aizņēma, paliek rezervēta.
`fixed`	Fiksēta pozicionēšana. Elements tiek noņemts no parastā dokumenta plūsmas un tiek pozicionēts attiecībā pret pārlūkloga logu. Paliek vietā, ritinot lapu.
`static`	Statiska pozicionēšana. Vērtība nozīmē pozicionēšanas neesamību un elements uzvedas parasti.
`sticky`	Lipīga pozicionēšana. Elements uzvedas kā `relative`, līdz tas sasniedz noteikto pozīciju ritinot, pēc tam pielīp pie norādītās vietas (kā `fixed`).

Noklusējuma vērtība: static.

Piemērs . Absolūta pozicionēšana

Novietosim elementu ekrāna augšējā kreisajā stūrī ar nelielām atkāpēm:

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

Piemērs . Absolūta pozicionēšana

Un tagad novietosim elementu ekrāna augšējā labajā stūrī ar nelielām atkāpēm:

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

Piemērs . Fiksēta pozicionēšana

Ar fiksētu pozicionēšanu elements paliks vietā, ritinot lapu:

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

Piemērs . Relatīva pozicionēšana

Ar relatīvu pozicionēšanu elements tiek pārvietots attiecībā pret savu normālo stāvokli, bet pārējie elementi uzvedas tā, it kā elements nebūtu pārvietots:

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

Piemērs . Iegulšana

Ja vecākam īpašība position ir ar vērtību relative, tad absolūti pozicionētie elementi tiks pozicionēti attiecībā pret vecāku:

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

Piemērs . Iegulšana

Ja vecākam īpašība position ir ar vērtību absolute, tad absolūti pozicionētie elementi tiks pozicionēti attiecībā pret vecāku:

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

Piemērs . Lipīga pozicionēšana

Ja elementam īpašība position ir ar vērtību sticky, tad elements uzvedas kā relative, līdz tas sasniedz noteikto pozīciju ritinot, pēc tam pielīp pie vietas. Izveidosim lipīgu galveni:

<h1>Galvenais vietnes galvene</h1>

<div class="header">galvene galvene galvene</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;
}

Piemērs . Bez pozīcijas

Ja elementam tiek iestatīta absolūta pozicionēšana bez pozīcijas norādīšanas, tad elements paliks stāvam tajā pašā vietā, kur tas atradās bez pozicionēšanas, bet pārējie elementi pārstās to pamanīt:

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

Piemērs . Viena ass

Ar absolūtu pozicionēšanu var iestatīt pozīciju tikai pa vienu asi. Piemēram, ja mēs iestatām īpašību top, tad vertikāli elements nonāks vajadzīgajā pozīcijā, bet horizontāli paliks stāvam, tur, kur tas atradās:

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

Piemērs . Visas pozīcijas

Ar absolūtu pozicionēšanu var iestatīt pozīcijas no visām pusēm, neiestatot platumu un augstumu. Šajā gadījumā elements nonāks vecāka bloka centrā:

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

Skatiet arī

īpašība z-index,
kas nosaka elementu uzlikšanu vienu virs otra