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, bottom hazifanyi 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: relative au 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 relative na fixed.

• Element huanza kama relative, lakini ikifika top iliyowekwa, inakuwa fixed.

• Inabaki pale hadi mzazi wake amalizike.

div {
  position: sticky;
  top: 10px;
}

✅ 6. Mchoro wa Kulinganisha

✅ 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

1. Ni ipi tabia ya default ya element kwenye position?
   a) absolute
   b) static
   c) relative
   d) fixed

2. 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

3. Element yenye position: fixed; huwekwa kulingana na?
   a) mzazi wake
   b) content ya ndani
   c) viewport (dirisha la kivinjari)
   d) sibling element

4. position: absolute; huhusiana na nani?
   a) viewport
   b) mzazi wa karibu mwenye position yoyote ile
   c) mzazi mwenye position: relative
   d) static element yoyote

5. position: sticky; huanza kama nini?
   a) fixed
   b) absolute
   c) relative
   d) none

Nyuma Endelea

Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save

Author: Rajabu Tarehe: 2025-07-03 Topic: CSS Main: ICT File: Download PDF Views 422

Share On:

Facebook WhatsApp

Share follows: 0 | Unique share links followed: 0

Sponsored links
👉1 Dua za Mitume na Manabii    👉2 web hosting    👉3 Bongolite - Game zone - Play free game    👉4 Simulizi za Hadithi Audio    👉5 Tafasiri ya Riyadh Swalihina    👉6 Sira ya Mtume Muhammad (s.a.w)   

Post zinazofanana:

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 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 18: Grid Layout

Katika somo hili, utajifunza misingi ya CSS Grid Layout, mfumo wenye nguvu wa kupanga vipengele katika safu (rows) na nguzo (columns). Tutachambua display: grid, pamoja na grid-template-columns, grid-template-rows, gap, grid-column, na grid-row.

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 12: Width, Height, Max/Min Width na Overflow

Katika somo hili, utajifunza jinsi ya kudhibiti upana (width) na urefu (height) wa elementi katika CSS. Pia utaelewa tofauti kati ya max-width, min-width, na jinsi overflow inavyodhibiti tabia ya content inayoizidi element.

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 16: Flexbox Basics

Katika somo hili, utajifunza msingi wa mfumo wa Flexbox unaotumika kupanga elementi kwa usahihi ndani ya kontena. Utajifunza kuhusu display: flex;, pamoja na properties muhimu kama justify-content, align-items, flex-direction, na gap.

Soma Zaidi...

CSS - somo la 2: Jinsi ya ku weka code za css kwenye HTML

katika somo hili utajifunza jinsi ya ku install css kwenye ukurasa wa html

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 29: CSS z-index na Stacking Context

Katika somo hili tutajifunza kuhusu z-index, ambayo hutumika kudhibiti ni elementi ipi ionekane juu au chini wakati kuna elementi nyingi zinazofunika sehemu moja. Pia tutajifunza kuhusu stacking context, yaani jinsi vivinjari vinavyopanga

Soma Zaidi...