Uwekaji Kabisa bila Kuratibu katika CSS
Kwa kweli kuonyesha kuratibu wakati wa uwekaji kabisa
sio lazima. Ikiwa kipengele
kiandikwe tu position kwa thamani
absolute, basi kitakuwa kimewekwa kabisa,
lakini kitabaki kusimama mahali pale pale
kilichokuwa kimesimama. Wakati huo huo vipengele vyote vingine
vitafanya kana kwamba kipengele chetu hakipo
na wanaweza kukanyaga juu yake.
Wacha tuangalie kwa mifano.
Mfano
Kwa mwanzo wacha tuweke vizuizi vitu bila uwekaji na kati yacho maandishi fulani:
<div id="elem1"></div>
<div id="elem2"></div>
maandishi maandishi maandishi maandishi maandishi maandishi
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Mfano
Sasa wacha tuongeze kizuizi kijani absolute.
Kama matokeo kizuizi hiki kitabaki mahali pake,
na vipengele vyote chini vitafanya kana
kwamba kipengele chetu hakipo na vitakanyaga juu yake:
<div id="elem1"></div>
<div id="elem2"></div>
maandishi maandishi maandishi maandishi maandishi maandishi
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Mfano
Sasa wacha tuongeze sifa left,
bila kuongeza nafasi wima. Kama matokeo
usawa kizuizi chetu kitasimama kwa thamani iliyoonyeshwa,
na wima - kitabaki kusimama
pale pale palipokuwa:
<div id="elem1"></div>
<div id="elem2"></div>
maandishi maandishi maandishi maandishi maandishi maandishi
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
left: 40px; /* kuongeza nafasi usawa */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
Mfano
Sasa wacha, kinyume chake, tuongeze sifa
top, bila kuongeza nafasi usawa.
Kama matokeo wima kizuizi chetu kitasimama
kwa thamani iliyoonyeshwa, na usawa -
kitabaki kusimama pale pale palipokuwa:
<div id="elem1"></div>
<div id="elem2"></div>
maandishi maandishi maandishi maandishi maandishi maandishi
<div id="elem3"></div>
#elem1 {
width: 200px;
height: 150px;
border: 1px solid red;
}
#elem2 {
position: absolute;
top: 100px; /* kuongeza nafasi wima */
width: 100px;
height: 100px;
margin-left: 10px;
border: 1px solid green;
}
#elem3 {
width: 50px;
height: 150px;
border: 1px solid blue;
}
:
