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">գլխագիր գլխագիր գլխագիր</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 հատկությունը,
որը սահմանում է էլեմենտների վերադասավորում