Vetia position

Vetia position përcakton mënyrën e pozicionimit të elementeve. Kjo vetë përdoret më së shpeshti së bashku me vetitë top, right, bottom, left, të cilat përcaktojnë distancat nga lart, djathtas, poshtë dhe majtas përkatësisht.

Sintaksa

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

Vlerat për position

Vlera	Përshkrimi
`absolute`	Pozicionim absolut. Elementi hiqet nga rrjedha normale e dokumentit dhe pozicionohet në lidhje me paraardhësin më të afërt të pozicionuar (nëse ekziston) ose në lidhje me dritaren e shfletuesit.
`relative`	Pozicionim relativ. Elementi zhvendoset në lidhje me pozicionin e tij normal në rrjedhën e dokumentit, por hapësira që ai zinte mbetet e rezervuar.
`fixed`	Pozicionim i fiksuar. Elementi hiqet nga rrjedha normale e dokumentit dhe pozicionohet në lidhje me dritaren e shfletuesit. Mbetet në vend gjatë rrëshqitjes së faqes.
`static`	Pozicionim statik. Vlera nënkupton mungesë të pozicionimit dhe elementi sillet normalisht.
`sticky`	Pozicionim ngjitës. Elementi sillet si `relative`, derisa të arrijë pozicionin e caktuar gjatë rrëshqitjes, pas së cilës ngjitet në vendin e specifikuar (si `fixed`).

Vlera e paracaktuar: static.

Shembull . Pozicionim absolut

Le të pozicionojmë një element në cepin e sipërm të majtë të ekranit me distanca të vogla:

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

Shembull . Pozicionim absolut

Tani le të pozicionojmë një element në cepin e sipërm të djathtë të ekranit me distanca të vogla:

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

Shembull . Pozicionim i fiksuar

Me pozicionimin e fiksuar, elementi do të mbetet në vend gjatë rrëshqitjes:

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

Shembull . Pozicionim relativ

Me pozicionimin relativ, elementi zhvendoset në lidhje me pozicionin e tij normal, por elementët e tjerë sillen sikur elementi të mos ishte zhvendosur:

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

Shembull . Folezim

Nëse prindi ka vetinë position me vlerë relative, atëherë elementët e pozicionuar absolutisht do të pozicionohen në lidhje me prindin:

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

Shembull . Folezim

Nëse prindi ka vetinë position me vlerë absolute, atëherë elementët e pozicionuar absolutisht do të pozicionohen në lidhje me prindin:

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

Shembull . Pozicionim ngjitës

Nëse për një element vetia position ka vlerën sticky, atëherë elementi sillet si relative, derisa të arrijë pozicionin e caktuar gjatë rrëshqitjes, pas së cilës ngjitet në vend. Le të krijojmë një header ngjitës:

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

Shembull . Pa pozicion

Nëse një elementi i jepet pozicionim absolut pa specifikuar pozitën, atëherë elementi do të mbetet në vendin ku ndodhej pa pozicionim, por elementët e tjerë do të ndalojnë ta shohin atë:

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

Shembull . Një aks

Me pozicionimin absolut, mund të specifikohet pozicioni vetëm përgjatë një aksi. Për shembull, nëse specifikojmë vetinë top, atëherë vertikalisht elementi do të vendoset në pozicionin e duhur, ndërsa horizontalisht do të mbetet aty ku ishte:

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

Shembull . Të gjitha pozicionet

Me pozicionimin absolut, mund të specifikohen pozicionet nga të gjitha anët, pa specifikuar gjerësinë dhe lartësinë. Në këtë rast, elementi do të vendoset në qendër të bllokut prind:

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

Shihni gjithashtu

vetia z-index,
e cila përcakton mbivendosjen e elementeve