Хусусияти position

Хусусияти position роҳи ҷойгир кардани элементҳоро муайян мекунад. Ин хусусият аксар вақт бо хусусиятҳои top, right, bottom, left истифода мешавад, ки фосилаҳоро аз боло, рост, поён, чап мутаносибан муайян мекунанд.

Синтаксис

интихобкунанда {
	position: absolute | relative | fixed | static | sticky;
}

Қиматҳои барои position

Қимат	Тавсиф
`absolute`	Ҷойгиркунии мутлақ. Элемент аз ҳаракати оддии ҳуҷҷат хориҷ шуда ва ҷойгир карда мешавад нисбат ба наздиктарин наслҳои ҷойгиршуда (агар ҳаст) ё нисбат ба равзанаи браузер.
`relative`	Ҷойгиркунии нисбӣ. Элемент нисбат ба вазъияти оддии худ дар ҳаракати ҳуҷҷат ҷой иваз мекунад, аммо фазо, ки он ишғол мекард, захирашуда боқӣ мемонад.
`fixed`	Ҷойгиркунии собит. Элемент аз ҳаракати оддии ҳуҷҷат хориҷ шуда ва ҷойгир карда мешавад нисбат ба равзанаи браузер. Дар ҷойи худ ҳангоми скролли саҳифа боқӣ мемонад.
`static`	Ҷойгиркунии статикӣ. Қимат маънои набудани ҷойгиркуниро дорад ва элемент ба таври оддӣ амал мекунад.
`sticky`	Ҷойгиркунии часпак. Элемент ба монанди `relative` амал мекунад, то он даме ки ба мавқеъи муайяншуда ҳангоми скролл нарасад, пас ба мавқеъи муайяншуда (ба монанди `fixed`) мечаспад.

Қимати пешфарз: static.

Намуна . Ҷойгиркунии мутлақ

Элементро дар гӯшаи болоии чапи экран бо фосилаҳои андак ҷойгир мекунем:

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

Намуна . Ҷойгиркунии мутлақ

Ва акнун элементро дар гӯшаи болоии рости экран бо фосилаҳои андак ҷойгир мекунем:

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

Намуна . Ҷойгиркунии собит

Дар ҷойгиркунии собит элемент дар ҷойи худ ҳангоми скролл боқӣ мемонад:

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

Намуна . Ҷойгиркунии нисбӣ

Дар ҷойгиркунии нисбӣ элемент ҷой иваз мекунад нисбат ба вазъияти оддии худ, аммо дигар элементҳо ба тавре амал мекунанд, ки гӯё элемент ҷой иваз накардааст:

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

Намуна . Фаромадӣ

Агар ба волидайн хусусияти position қимати relative дошта бошад, пас элементҳои ҷойгиркардаи мутлақ нисбат ба волидайн ҷойгир карда мешаванд:

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

Намуна . Фаромадӣ

Агар ба волидайн хусусияти position қимати absolute дошта бошад, пас элементҳои ҷойгиркардаи мутлақ нисбат ба волидайн ҷойгир карда мешаванд:

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

Намуна . Ҷойгиркунии часпак

Агар ба элемент хусусияти position қимати sticky дошта бошад, пас элемент ба монанди relative амал мекунад, то он даме ки ба мавқеъи муайяншуда ҳангоми скролл нарасад, пас ба мавқеъ мечаспад. Биёед сарлавҳаи часпак созем:

<h1>Сарлавҳаи Асосии Сомона</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;
}

Намуна . Бе ҷойгиркунӣ

Агар ба элемент ҷойгиркунии мутлақ таъин карда шавад бе муайян кардани мавқеъ, пас элемент дар он ҷо боқӣ мемонад, ки бе ҷойгиркунӣ истода буд, аммо дигар элементҳо аз дида баромадани он бозмеистанд:

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

Намуна . Як меҳвар

Дар ҷойгиркунии мутлақ метавон мавқеъро танҳо дар як меҳвар муайян кард. Масалан, агар мо хусусияти top-ро муайян кунем, пас амудӣ элемент ба мавқеъи зарурӣ мерасад, ва уфуқӣ дар ҳамон ҷо боқӣ мемонад, ки истода буд:

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

Намуна . Ҳама мавқеъҳо

Дар ҷойгиркунии мутлақ метавон мавқеъҳоро аз ҳама тараф муайян кард, бе муайян кардани паҳнӣ ва баландӣ. Дар ин сурат элемент ба маркази блокаи волидайн мерасад:

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

Ҳамчунин бубинед

хусусияти z-index,
ки рӯи ҳам гузоштани элементҳоро муайян мекунад