CSS - SOMO LA 14: Position Property

? 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