Sypat position

Sypat position elementleriň pozisionirlenme usulyny kesgitleýär. Bu sypat esasan top, right, bottom, left sypatlary bilen bilelikde ulanylyp, ýokardan, sagdan, aşakdan we çepden gönükme berýär.

Gramer

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

Position üçin bahalar

Baha	Düşündiriş
`absolute`	Absolýut pozisionirlenme. Element dokumanyň adaty akymyndan çykarylýar we iň ýakyn pozisionirlenen ata (bar bolsa) ýa-da brauzer penjiresine görä pozisionirlenýär.
`relative`	Nisbi pozisionirlenme. Element dokumanyň akymyndaky adaty ýerineşmegine görä çalşylýar, ýöne ol eýeleýän giňişlik ýatda saklanýar.
`fixed`	Bellige alynan pozisionirlenme. Element dokumanyň adaty akymyndan çykarylýar we brauzer penjiresine görä pozisionirlenýär. Sahypa süýşürilende ýerinde galýar.
`static`	Statik pozisionirlenme. Bu baha pozisionirlenme ýoklugyny aňladýar we element adaty ýaly hereket edýär.
`sticky`	Yapşak pozisionirlenme. Element süýşürme wagty kesgitlenen pozisiýa ýetýänçä `relative` ýaly hereket edýär, soňra kesgitlenen ýere yapşyp galýar (`fixed` ýaly).

Bellenen bahasy: static.

Mysal . Absolýut pozisionirlenme

Elementi ekranyň çep ýokar burçunda kiçi gönükmeler bilen ýerleşdireli:

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

Mysal . Absolýut pozisionirlenme

Indi element ekranyň sag ýokar burçunda kiçi gönükmeler bilen ýerleşdirilsin:

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

Mysal . Bellige alynan pozisionirlenme

Bellige alynan pozisionirlenmede element süýşürilende ýerinde galar:

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

Mysal . Nisbi pozisionirlenme

Nisbi pozisionirlenmede element adaty ýerineşmegine görä çalşylýar, ýöne beýleki elementler element çalşylmadyk ýaly hereket edýär:

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

Mysal . Iç içe geçme

Eger ata elementde position sypaty relative bahasyna eýe bolsa, onda absolýut pozisionirlenen elementler ata elemente görä pozisionirlener:

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

Mysal . Iç içe geçme

Eger ata elementde position sypaty absolute bahasyna eýe bolsa, onda absolýut pozisionirlenen elementler ata elemente görä pozisionirlener:

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

Mysal . Yapşak pozisionirlenme

Eger element üçin position sypaty sticky bahasyna eýe bolsa, element süýşürme wagty kesgitlenen pozisiýa ýetýänçä relative ýaly hereket edýär, soňra ýere yapşýar. Yapşak header düzeliň:

<h1>Esasy Siteniň Headeri</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;
}

Mysal . Pozisiýasyz

Eger elemente pozisiýa görkezmän absolýut pozisionirlenme berilse, onda element pozisionirlenmesiz duran ýerinde galar, ýöne beýleki elementler ony anyklamaz:

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

Mysal . Bir ok

Absolýut pozisionirlenmede pozisiýa diňe bir ok boýunça berlip bilner. Meselem, top sypatyny kesgitlesek, element dikeý ok boýunça zerur ýere geýär, ýöne gorizontal ok boýunça duran ýerinde galar:

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

Mysal . Ähli pozisiýalar

Absolýut pozisionirlenmede giňlik we beýiklik bermän, ähli tarapdan pozisiýa berlip bilner. Bu ýagdaýda element ata blogyň merkezinde durar:

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

Şeýle-de gözüňüz aýlasyn

z-index sypaty,
elementleriň üst-üstine düşüşini kesgitleýär