Uwekaji Wahusika wa Vipengele katika CSS

Uwekaji wahusika huwekwa kwa kutumia thamani relative kwa sifa position. Uwekaji kama huu huruhusu kusogeza vipengele jamaa na nafasi yao ya sasa kwa kiwango kilichowekwa. Wakati huo huo vipengele vyote vingine vya ukurasa vitafikiri kwamba kipengele kiko mahali pale kilipokuwa mwanzoni. Yaani kwa aina hii ya uwekaji kipengele hakiondoki kwenye mtiririko wa kawaida.

Miendo kutoka nafasi ya sasa huwekwa kwa sifa top, right, bottom na left.

Mfano

Kwanza tufanye vizuizi viwili bila uwekaji wowote:

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

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

Mfano

Sasa tuongeze relative kwa kizuizi cha kwanza. Kwa sasa hakuna kitakachobadilika, kwa sababu hatujabainisha mwendo wa kizuizi:

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

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

Mfano

Sasa tusogeze kizuizi chetu kwa 30px kutoka juu, tukiweka sifa top. Wakati huo vipengele vingine vyote vitafanya kana kwamba kizuizi chetu kimesalia pale pale kilipokuwa mwanzoni:

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

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

Mfano

Tusogeze pia kizuizi chetu kwa 40px kutoka kushoto, tukiweka sifa left:

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

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

Mfano

Thamani hasi za sifa top, right, bottom na left husogeza kwa mwelekeo kinyume. Kwa mfano, thamani chanya ya top husogeza chini, na hasi - juu.

Tusogeze kizuizi chetu cha pili kwa 40px juu, tukiweka thamani hasi ya sifa top:

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

#elem1 {
	width: 100px;
	height: 100px;
	border: 1px solid green;
}
#elem2 {
	position: relative;
	top: -40px;
	left: 20px;
	
	width: 200px;
	height: 200px;
	border: 1px solid red;
}

Kazi za Vitendo

Kuna vizuizi vifuatavyo:

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

#elem1 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #FF8888;
}
#elem2 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #7E89EB;
}
#elem3 {
	width: 100px;
	height: 100px;
	margin-bottom: 20px;
	background-color: #4DEE99;
}

Sogeza vizuizi hivi kwa kutumia uwekaji wahusika kama ifuatavyo: