Uwekaji Kabisa wa Vipengele katika CSS

Katika somo hili tutachambua uwekaji kabisa wa vipengele. Unakuwezesha kuweka vipengele kulingana na kuratibu maalum za ukurasa. Kwa mfano, inawezekana kuweka kipengele katika nafasi ya 100px kutoka juu ya ukurasa na 200px kutoka kushoto. Kipengele kitasogea huko, bila kujali kama kuna vipengele vingine vilivyowekwa hapo na kutawekwa juu yao. Inasemekana kuwa katika hali hii kipengele kinatoka katika mtiririko wa kawaida wa waraka: vyote vilivyobaki vitafanya kana kwamba hakuna kipengele chetu.

Ili kufanya kipengele kiwe na uwekaji kabisa, kipengele hiki kinahitaji kupewa sifa position kwa thamani absolute. Zaidi ya sifa hii, zinahitajika mbili zaidi: moja itaweka kuratibu wima, na nyingine - usawa.

Kwa wima inahitajika kuweka pengo kutoka juu, au kutoka chini. Pengo la juu huwekwa na sifa top, na pengo la chini - na sifa bottom. Kwa usawa inahitajika kuweka pengo kutoka kushoto, au kutoka kulia. Pengo la kushoto huwekwa na sifa left, na pengo la kulia - na sifa right.

Tuangalie kwa mifano.

Mfano

Kwanza tufanye vizuizi viwili bila uwekaji maalum (makini kuwa vipengele havijahusishwa na ukingo wa dirisha, kwa sababu body ina margin kwa chaguomsingi):

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Mfano

Sasa tuweke kizuizi cha kijani uwekaji kabisa, tukiweka katika nafasi ya juu 150px na kushoto 100px:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 150px;
	left: 100px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Mfano

Sasa tuweke kizuizi cha kijani katika nafasi 0px kutoka juu na 0px kutoka kushoto:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0px;
	left: 0px;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Mfano

Sasa tuweke kizuizi cha kijani katika nafasi 0px kutoka juu na 0px kutoka kulia:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	top: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Mfano

Sasa tuweke kizuizi cha kijani katika nafasi 0px kutoka chini na 0px kutoka kulia:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	right: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Mfano

Sasa tuweke kizuizi cha kijani katika nafasi 0px kutoka chini na 0px kutoka kushoto:

<div id="elem1"></div>
<div id="elem2"></div>

#elem1 {
	width: 200px;
	height: 200px;
	border: 1px solid red;
}
#elem2 {
	position: absolute;
	bottom: 0;
	left: 0;
	
	width: 100px;
	height: 100px;
	border: 1px solid green;
}

Kazi za Vitendo

Kwa kutumia uwekaji kabisa weka visuizi kama ifuatavyo: