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 қасиеті,
ол элементтердің үстіне қабаттасуын белгілейді