Atribuut position

Atribuut position määrab elementide positsioneerimise viisi. Seda atribuuti kasutatakse kõige sagedamini koos atribuutidega top, right, bottom, left, mis määravad vastavalt ülalt, paremalt, alt ja vasakult vahed.

Süntaks

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

Väärtused position jaoks

Väärtus	Kirjeldus
`absolute`	Absoluutne positsioneerimine. Element eemaldatakse dokumendi tavalisest voost ja positsioneeritakse suhtes lähima positsioneeritud eellasega (kui on olemas) või suhtes brauseri aknaga.
`relative`	Suhteline positsioneerimine. Element nihutatakse suhtes oma tavapärasele asukohale dokumendi voos, kuid ruum, mida see hõivas, jääb reserveerituks.
`fixed`	Fikseeritud positsioneerimine. Element eemaldatakse dokumendi tavalisest voost ja positsioneeritakse suhtes brauseri aknaga. Jääb lehe kerimisel paigale.
`static`	Staatiline positsioneerimine. Väärtus tähendab positsioneerimise puudumist ja element käitub nagu tavaliselt.
`sticky`	Kleepuv positsioneerimine. Element käitub nagu `relative`, kuni jõuab kerimisel määratud asendini, misjärel see kleepub määratud kohta (nagu `fixed`).

Vaikeväärtus: static.

Näide . Absoluutne positsioneerimine

Paigutame elemendi ekraani ülemisse vasakusse nurka väikeste vahedega:

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

Näide . Absoluutne positsioneerimine

Ja nüüd paigutame elemendi ekraani ülemisse paremasse nurka väikeste vahedega:

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

Näide . Fikseeritud positsioneerimine

Fikseeritud positsioneerimise korral element jääb kerimisel paigale:

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

Näide . Suhteline positsioneerimine

Suhtelise positsioneerimise korral element nihutatakse suhtes oma tavapärasele asukohale, kuid teised elemendid käituvad nii, nagu elementi ei oleks nihutatud:

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

Näide . Pesastus

Kui vanemal on atribuut position väärtusega relative, siis absoluutselt positsioneeritud elemendid positsioneeritakse suhtes vanemaga:

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

Näide . Pesastus

Kui vanemal on atribuut position väärtusega absolute, siis absoluutselt positsioneeritud elemendid positsioneeritakse suhtes vanemaga:

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

Näide . Kleepuv positsioneerimine

Kui elemendil on atribuut position väärtusega sticky, siis element käitub nagu relative, kuni jõuab kerimisel määratud asendini, misjärel kleepub kohta. Teeme kleepuva päise:

<h1>Peamine saidi päis</h1>

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

Näide . Ilma positsioonita

Kui elemendile määrata absoluutne positsioneerimine ilma positsiooni määramata, siis element jääb seisma sinna kohta, kuhu see ilma positsioneerimiseta seisis, kuid teised elemendid lakkavad seda märkamast:

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

Näide . Üks telg

Absoluutse positsioneerimise korral saab määrata positsiooni ainult ühe telje järgi. Näiteks kui me määrame atribuudi top, siis vertikaalselt element asetub õigesse positsiooni, kuid horisontaalselt jääb seisma sinna, kus ta seisis:

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

Näide . Kõik positsioonid

Absoluutse positsioneerimise korral saab määrata positsioonid kõikidelt poolt, määramata laiust ega kõrgust. Sellisel juhul element asetub vanemaploki keskele:

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

Vaata ka

atribuut z-index,
mis määrab elementide pealekattumise