Sifa position

Sifa position inaweka njia ya kuweka msimamo wa vipengele. Sifa hii mara nyingi hutumika pamoja na sifa top, right, bottom, left, ambazo huweka mapungufu juu, kulia, chini, kushoto mtawalia.

Kisarufu

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

Thamani za position

Thamani	Maelezo
`absolute`	Uwekaji msimamo kamili. Kipengele kinachukuliwa kutoka kwenye mtiririko wa kawaida wa hati na kuwekwa msimamo kuhusiana na mzazi aliye na msimamo wa karibu zaidi (ikiwapo) au kuhusiana na dirisha la kivinjari.
`relative`	Uwekaji msimamo wa jamaa. Kipengele husogezwa kuhusiana na msimamo wake wa kawaida katika mtiririko wa hati, lakini nafasi ambayo ilikuwa inachukua, inabaki imehifadhiwa.
`fixed`	Uwekaji msimamo uliowekwa. Kipengele kinachukuliwa kutoka kwenye mtiririko wa kawaida wa hati na kuwekwa msimamo kuhusiana na dirisha la kivinjari. Kinabaki mahala pale wakati wa kusokota ukurasa.
`static`	Uwekaji msimamo tuli. Thamani hii inamaanisha ukosefu wa uwekaji msimamo na kipengele hujitahidi kama kawaida.
`sticky`	Uwekaji msimamo unaobana. Kipengele hujitahidi kama `relative`, hadi inapofikia msimamo uliowekwa wakati wa kusokota, kisha kinabana kwenye mahali maalum (kama `fixed`).

Thamani chaguomsingi: static.

Mfano . Uwekaji msimamo kamili

Weka kipengele kwenye kona ya juu kushoto ya skrini kwa mapungufu madogo:

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

Mfano . Uwekaji msimamo kamili

Sasa weka kipengele kwenye kona ya juu kulia ya skrini kwa mapungufu madogo:

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

Mfano . Uwekaji msimamo uliowekwa

Kwa uwekaji msimamo uliowekwa, kipengele kitasalia mahala pale wakati wa kusokota:

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

Mfano . Uwekaji msimamo wa jamaa

Kwa uwekaji msimamo wa jamaa, kipengele husogezwa kuhusiana na msimamo wake wa kawaida, lakini vipengele vingine hujitahida vile, kana kwamba kipengele hakikusongwa:

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

Mfano . Uwekaji ndani

Ikiwa kwa mzazi sifa position ina thamani relative, basin vipengele vilivyowekwa msimamo kamili vitawekwa msimamo kuhusiana na mzazi:

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

Mfano . Uwekaji ndani

Ikiwa kwa mzazi sifa position ina thamani absolute, basin vipengele vilivyowekwa msimamo kamili vitawekwa msimamo kuhusiana na mzazi:

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

Mfano . Uwekaji msimamo unaobana

Ikiwa kwa kipengele sifa position ina thamani sticky, basi kipengele hujitahida kama relative, hadi inapofikia msimamo uliowekwa wakati wa kusokota, kisha kinabana kwenye mahali. Tufanye kichwa kinachobana:

<h1>Kichwa Kikuu cha Tovuti</h1>

<div class="header">kichwa kichwa kichwa</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;
}

Mfano . Bila msimamo

Ikiwa kipengele kinapewa uwekaji msimamo kamili bila kubainisha msimamo, basi kipengele kitasalia kusimama kwenye mahala pale, ambapo ilikuwa imesimama bila uwekaji msimamo, lakini vipengele vingine vitakoma kukigundua:

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

Mfano . Mhimili mmoja

Kwa uwekaji msimamo kamili unaweza kuweka msimamo kwenye mhimili mmoja tu. Kwa mfano, ikiwa tutaweka sifa top, basi kwa wima kipengele kitawekwa kwenye msimamo unaohitajika, lakini kwa mlalo kitasalia kusimama, pale, palipokuwa pamestahimiliva:

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

Mfano . Msimamo wote

Kwa uwekaji msimamo kamili unaweza kuweka msimamo kutoka pande zote, bila kutoa upana na urefu. Katika kesi hii, kipengele kitawekwa katikati ya kizuizi cha mzazi:

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

Angalia pia

sifa z-index,
ambayo inaweka kupachikwa kwa vipengele