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

div {
  position: static;
}

✅ 2. position: relative

div {
  position: relative;
  top: 20px;
  left: 10px;
}

✅ 3. position: absolute

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

✅ 4. position: fixed

div {
  position: fixed;
  top: 0;
  left: 0;
}

✅ 5. position: sticky

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

  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

Jiunge nasi WhatsApp kupata update zetu

Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 1970-01-01 03:33:45 Topic: CSS Main: ICT File: Download PDF Views 264

Share On:

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

Post zinazofanana:

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 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 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...
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 34: if() Condition katika CSS

Katika somo hili, tutajifunza kipengele kipya kinachoitwa if() function ndani ya CSS, kilichoanza kupatikana kwenye toleo la Chrome 137. Kipengele hiki kinaturuhusu kuandika mantiki ya masharti moja kwa moja kwenye property ya CSS, bila kutumia JavaScript wala media query zilizotawanyika. Tutajifunza pia aina za queries: media(), supports(), na style() pamoja na matumizi yao ya kivitendo kwenye tovuti. Mwisho, tutaeleza kwa kina kuhusu pointer na any-pointer.

Soma Zaidi...
CSS - somo la 5: Njia tano zinazotumika kuweka rangi kwenye css

Katika somo hili utajifunza aina tano za kuweka rangi kw akutumia css

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 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 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 6: Kuweka Background kwenye HTML kwa kutumia CSS

Katika somo hili, utajifunza jinsi ya kudhibiti muonekano wa sehemu ya nyuma (background) ya HTML element kwa kutumia CSS. Utaweza kuongeza rangi, picha, kuweka picha zisirudiwarudiwe, na hata kusogeza picha kwenye maeneo tofauti ya ukurasa.

Soma Zaidi...