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 web hosting 👉2 Tafasiri ya Riyadh Swalihina 👉3 Sira ya Mtume Muhammad (s.a.w) 👉4 kitabu cha Simulizi 👉5 Kitabu cha Afya 👉6 Simulizi za Hadithi Audio
Post zinazofanana:
CSS - SOMO LA 31: CSS Filters (blur, brightness, contrast.)
Katika somo hili tutajifunza kuhusu CSS Filters — mitindo inayotumika kuhariri mwonekano wa picha, video, au elementi nyingine kwa kuongeza athari kama blur, brightness, contrast, grayscale, na nyinginezo. Hii huifanya tovuti kuwa ya kisasa, ya kuvutia, na yenye mwingiliano mzuri.
Soma Zaidi...CSS - SOMO LA 9: Margin na Padding
Katika somo hili utajifunza tofauti kati ya margin na padding, kazi ya kila moja, jinsi ya kuzipima, na jinsi zinavyotumika kudhibiti nafasi ndani na nje ya elementi kwenye ukurasa wa HTML.
Soma Zaidi...Drone: Nyuki Dume na Majukumu Yake
Simulizi hii inaelezea maisha ya nyuki dume, zinazojulikana kama drone. Inafafanua majukumu yao, maisha yao ya kila siku ndani ya kiwanda cha nyuki, na hatima yao baada ya kufanikisha kuzaliana na kifalme cha nyuki. Simulizi pia inaangazia tofauti zao na nyuki wa kike, na umuhimu wao katika uzazi wa kifalme.
Soma Zaidi...CSS - SOMO LA 13: Display Property
Katika somo hili utajifunza kuhusu property muhimu ya CSS inayoitwa display, ambayo huamua jinsi element inavyoonyeshwa kwenye ukurasa. Tutachambua aina kuu za display: block, inline, inline-block, na none.
Soma Zaidi...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 7: Kutumia Fonti (Fonts) kwenye CSS
Katika somo hili utajifunza jinsi ya kudhibiti mwonekano wa maandishi kwa kutumia fonti kwenye CSS. Utajifunza jinsi ya kubadilisha aina ya fonti, ukubwa, mtindo, unene, na mpangilio wa maandishi ili yaweze kuonekana kwa mvuto na usomaji bora.
Soma Zaidi...CSS - SOMO LA 20: Media Queries na Responsive Design
Katika somo hili, utajifunza jinsi ya kutumia media queries kwa ajili ya kutengeneza tovuti zinazojibadilisha kulingana na ukubwa wa skrini. Tutazungumzia @media rules, breakpoints, na dhana ya mobile-first design.
Soma Zaidi...CSS - SOMO LA 28: CSS Timing Functions
Katika somo hili tutajifunza kuhusu CSS Timing Functions, ambazo hutumika kudhibiti kasi na mtiririko wa transition na animation. Utaelewa tofauti kati ya ease, linear, ease-in, ease-out, ease-in-out, pamoja na jinsi ya kutumia cubic-bezier() kwa kudhibiti mwendo wa mabadiliko kwenye elementi.
Soma Zaidi...CSS - SOMO LA 33: CSS Frameworks
Katika somo hili tutajifunza kuhusu CSS frameworks mbalimbali zinazosaidia kuharakisha uundaji wa mitindo kwenye tovuti. Tutazungumzia frameworks maarufu kama W3.CSS, Bootstrap, Google Fonts, na nyinginezo, faida, matumizi, na tofauti zao.
Soma Zaidi...CSS - SOMO LA 30: CSS Functions – calc(), clamp(), var(), min(), max() na Custom Functions
Katika somo hili, tutajifunza kuhusu CSS functions muhimu zinazotumika kufanya mahesabu, kuweka vipimo vya kisasa vinavyobadilika kulingana na hali ya kifaa, na kutumia variables. Tutazingatia functions kama: calc(), clamp(), var(), min(), max(), na mwishoni tutajifunza jinsi ya kutengeneza custom function kwa kutumia variables.
Soma Zaidi...