CSS - SOMO LA 14: Position Property
Katika somo hili utajifunza kuhusu property ya position katika CSS, ambayo hutumika kuamua jinsi element inavyowekwa ndani ya ukurasa. Tutajifunza aina tano kuu za position: static, relative, absolute, fixed, na sticky.
📘 Utangulizi
Kwa kawaida, elementi huwekwa kwenye ukurasa kulingana na mtiririko wa kawaida wa HTML. Hata hivyo, wakati mwingine tunahitaji kuzipanga kwa uangalifu zaidi — mfano kuzifanya zibaki juu hata ukurasa ukisogea, au kuzifanya zisogee kuanzia kwenye position fulani. Hapa ndipo position property inapokuja kusaidia.
✅ 1. position: static
-
Hii ndiyo tabia ya kawaida ya elementi.
-
Elementi huwekwa kulingana na mtiririko wa kawaida wa ukurasa.
-
top,left,right,bottomhazifanyi kazi.
div {
position: static;
}
✅ 2. position: relative
-
Element huwekwa kulingana na nafasi yake ya kawaida.
-
Inaweza kusogezwa kwa kutumia
top,left,right,bottom. -
Nafasi ya awali inabaki imehifadhiwa (invisible space).
div {
position: relative;
top: 20px;
left: 10px;
}
✅ 3. position: absolute
-
Element hutolewa kwenye mtiririko wa kawaida wa ukurasa.
-
Huwekwa kulingana na mzazi (parent) wake wa karibu mwenye
position: relativeau element ya juu kabisa (html). -
Haichukui nafasi kabisa kwenye layout.
div {
position: absolute;
top: 50px;
left: 100px;
}
✅ 4. position: fixed
-
Element huwekwa kulingana na dirisha la kivinjari (viewport).
-
Haibadiliki hata ukiscroll.
-
Hutumika kwa menu za kudumu juu ya ukurasa.
div {
position: fixed;
top: 0;
left: 0;
}
✅ 5. position: sticky
-
Mchanganyiko wa
relativenafixed. -
Element huanza kama
relative, lakini ikifikatopiliyowekwa, inakuwafixed. -
Inabaki pale hadi mzazi wake amalizike.
div {
position: sticky;
top: 10px;
}
✅ 6. Mchoro wa Kulinganisha
| Position Type | Inafuata mtiririko? | Inaweza kusogezwa? | Haionekani ikiscroll? |
|---|---|---|---|
| static | ✔️ | ❌ | ✔️ |
| relative | ✔️ | ✔️ | ✔️ |
| absolute | ❌ | ✔️ | ✔️ |
| fixed | ❌ | ✔️ | ❌ (hudumu juu) |
| sticky | ✔️/❌ | ✔️ (baadaye) | ❌ (wakati fulani) |
✅ Mfano Kamili
<div style="position: relative;">
<div style="position: absolute; top: 0; left: 0; background: red;">
Absolute Element
</div>
</div>
<div style="position: fixed; top: 0; background: yellow;">
Fixed Menu
</div>
<div style="position: sticky; top: 50px; background: lightgreen;">
Sticky Header
</div>
✅ Hitimisho
Kuelewa position ni muhimu kwa kupanga layout kwa ufanisi. Aina tofauti za position hutoa nguvu na uwezo mkubwa wa kudhibiti tabia ya elementi, hasa kwenye tovuti za kisasa zenye muundo unaobadilika au sehemu za kudumu.
🧠 Maswali ya Kujitathmini
-
Ni ipi tabia ya default ya element kwenye position?
a) absolute
b) static
c) relative
d) fixed -
position: relative;inafanya nini?
a) Hutoka kwenye mtiririko wa kawaida
b) Huifanya element kuwa fixed
c) Huwekwa kwa kuzingatia nafasi yake ya awali
d) Huifanya ibaki chini ya ukurasa -
Element yenye
position: fixed;huwekwa kulingana na?
a) mzazi wake
b) content ya ndani
c) viewport (dirisha la kivinjari)
d) sibling element -
position: absolute;huhusiana na nani?
a) viewport
b) mzazi wa karibu mwenye position yoyote ile
c) mzazi mwenyeposition: relative
d) static element yoyote -
position: sticky;huanza kama nini?
a) fixed
b) absolute
c) relative
d) none
Umeionaje Makala hii.. ?
👉1 Bongolite - Game zone - Play free game 👉2 web hosting 👉3 Madrasa kiganjani 👉4 Simulizi za Hadithi Audio 👉5 Kitau cha Fiqh 👉6 kitabu cha Simulizi
Post zinazofanana:
CSS - SOMO LA 15: Float na Clear katika CSS
Katika somo hili utajifunza jinsi ya kutumia float ili kupanga elementi upande wa kushoto (left) au kulia (right). Pia utajifunza jinsi ya kutumia clear kuondoa athari za float na kuhakikisha layout yako inabaki thabiti.
Soma Zaidi...CSS - SOMO LA 24: CSS Variables (Custom Properties)
Katika somo hili, tutajifunza kuhusu CSS Variables, au Custom Properties. Utajifunza jinsi ya kuunda, kuitumia, na faida za kutumia variables katika CSS ili kuweka msimamizi mzuri wa rangi, ukubwa, na mitindo mingine ya kurudia-rudia.
Soma Zaidi...CSS - SOMO LA 21: CSS Units
Katika somo hili, utajifunza vipimo vinavyotumika kwenye CSS kama vile px, em, rem, %, vw, na vh. Vipimo hivi hutumika kuweka ukubwa wa maandishi, padding, margin, urefu, na upana wa vipengele kwenye tovuti.
Soma Zaidi...CSS - SOMO LA 8: Upambaji wa Maandishi (Text Styling)
Katika somo hili, utajifunza mbinu mbalimbali za kubadilisha muonekano wa maandishi kwa kutumia CSS, kama vile kupamba maandishi kwa mistari, kivuli, nafasi kati ya herufi, na mpangilio wa maneno.
Soma Zaidi...CSS - SOMO LA 11: Mitindo ya Border (Border Styles)
Katika somo hili, utajifunza jinsi ya kudhibiti mipaka (borders) ya vipengele kwa kutumia CSS. Tutajifunza namna ya kuweka unene wa border, rangi, aina ya mstari, na pia jinsi ya kutumia border kwa upande mmoja tu.
Soma Zaidi...CSS - SOMO LA 26: CSS Specificity (Kipaumbele cha Styles)
Katika somo hili, tutajifunza kuhusu CSS Specificity — yaani mfumo wa kipaumbele unaotumiwa na kivinjari kuchagua ni mtindo (style) upi utumike iwapo kuna migongano kati ya selectors mbalimbali. Utaelewa jinsi ya kupanga selectors zako vizuri ili kuzuia matatizo ya mitindo kutofanya kazi kama ulivyotarajia.
Soma Zaidi...CSS - SOMO LA 27: Kutumia @import Katika CSS
Katika somo hili, tutajifunza kuhusu @import — amri inayotumika kuingiza faili moja la CSS ndani ya jingine. Tutaona namna ya kuitumia, faida zake, hasara zake, na tofauti kati yake na njia mbadala ya <link> ndani ya HTML.
Soma Zaidi...CSS - SOMO LA 19: Pseudo-classes na Pseudo-elements
Katika somo hili, utajifunza kuhusu pseudo-classes kama :hover, :first-child, na :last-child, pamoja na pseudo-elements kama ::before, ::after, na ::selection. Hizi husaidia kubadili au kuongeza mitindo maalum kulingana na hali ya elementi au sehemu maalum ya elementi.
Soma Zaidi...CSS - SOMO LA 25: CSS Shorthand Properties
Katika somo hili tutajifunza kwa kina kuhusu CSS Shorthand Properties — ni nini, jinsi zinavyofanya kazi, faida zake, na mifano mbalimbali ya kutumia shorthand kuandika CSS kwa njia fupi na bora zaidi.
Soma Zaidi...CSS - SOMO LA 22: CSS Transition na Animation
Katika somo hili, tutajifunza jinsi ya kuleta miondoko na harakati kwenye tovuti kwa kutumia CSS Transitions na Animations. Hii itasaidia kuboresha muonekano na matumizi ya tovuti.
Soma Zaidi...