Savybė position

Savybė position nustato elementų pozicionavimo būdą. Ši savybė dažniausiai naudojama kartu su savybėmis top, right, bottom, left, kurios nustato atitraukimus iš viršaus, iš dešinės, iš apačios, iš kairės atitinkamai.

Sintaksė

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

Reikšmės position savybei

Reikšmė	Aprašas
`absolute`	Absoliutusis pozicionavimas. Elementas pašalinamas iš normalaus dokumento srauto ir pozicionuojamas reliačiai artimiausio pozicionuoto pirmtakų elemento (jei toks yra) arba reliatyviai naršyklės lango.
`relative`	Reliatyvusis pozicionavimas. Elementas pasislenka reliatyviai savo normalios padėties dokumento sraute, tačiau erdvė, kurią jis užėmė, lieka rezervuota.
`fixed`	Fiksuotas pozicionavimas. Elementas pašalinamas iš normalaus dokumento srauto ir pozicionuojamas reliačiai naršyklės lango. Lieka vietoje puslapio slinkimo metu.
`static`	Statinis pozicionavimas. Reikšmė reiškia pozicionavimo nebuvimą ir elementas elgiasi kaip įprasta.
`sticky`	Lipnusis pozicionavimas. Elementas elgiasi kaip `relative`, kol pasiekia nustatytą padėtį slinkimo metu, po to priklijuoja prie nurodytos vietos (kaip `fixed`).

Numatytoji reikšmė: static.

Pavyzdys . Absoliutusis pozicionavimas

Pastatykime elementą viršutiniame kairiajame ekrano kampe su nedideliais atitraukimais:

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

Pavyzdys . Absoliutusis pozicionavimas

O dabar pastatykime elementą viršutiniame dešiniajame ekrano kampe su nedideliais atitraukimais:

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

Pavyzdys . Fiksuotas pozicionavimas

Esant fiksuotam pozicionavimui elementas liks vietoje slinkimo metu:

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

Pavyzdys . Reliatyvusis pozicionavimas

Esant reliatyviajam pozicionavimui elementas pasislenka reliačiai savo normalios padėties, tačiau kiti elementai elgiasi taip, tarsi elementas nebūtų pasislinkęs:

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

Pavyzdys . Įdėjimas

Jei tėvinio elemento savybė position turi reikšmę relative, tada absoliučiai supozicionuoti elementai bus pozicionuojami reliatyviai tėvinio elemento:

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

Pavyzdys . Įdėjimas

Jei tėvinio elemento savybė position turi reikšmę absolute, tada absoliučiai supozicionuoti elementai bus pozicionuojami reliatyviai tėvinio elemento:

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

Pavyzdys . Lipnusis pozicionavimas

Jei elemento savybė position turi reikšmę sticky, tai elementas elgiasi kaip relative, kol pasiekia nustatytą padėtį slinkimo metu, po to priklijuoja prie vietos. Padarykime lipniąją antraštę:

<h1>Pagrindinė svetainės antraštė</h1>

<div class="header">antraštė antraštė antraštė</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;
}

Pavyzdys . Be pozicijos

Jei elementui nustatyti absoliutųjį pozicionavimą nenurodant pozicijos, tai elementas liks stovėti toje vietoje, kurioje jis stovėjo be pozicionavimo, tačiau kiti elementai nustos jį pastebėti:

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

Pavyzdys . Viena ašis

Esant absoliučiajam pozicionavimui galima nustatyti poziciją tik išilgai vienos ašies. Pavyzdžiui, jei mes nustatysime savybę top, tai vertikaliai elementas atsistos reikiamoje pozicijoje, o horizontaliai liks stovėti, ten, kur ir stovėjo:

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

Pavyzdys . Visos pozicijos

Esant absoliučiajam pozicionavimui galima nustatyti pozicijas iš visų pusių, nenustatant pločio ir aukščio. Tokiu atveju elementas atsistos tėvinio bloko centre:

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

Taip pat žiūrėkite

savybė z-index,
kuri nustato elementų sluoksniavimą