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 234

Share On:

Facebook WhatsApp
Sponsored links
👉1 web hosting    👉2 Kitau cha Fiqh    👉3 Sira ya Mtume Muhammad (s.a.w)    👉4 Tafasiri ya Riyadh Swalihina    👉5 Simulizi za Hadithi Audio    👉6 Madrasa kiganjani   

Post zinazofanana:

CSS - SOMO LA 32: Custom Fonts na @font-face

Katika somo hili tutajifunza jinsi ya kutumia fonts za kipekee (custom fonts) katika tovuti kwa kutumia njia mbili kuu: Google Fonts na @font-face. Tutajifunza pia sababu za kutumia fonts maalum, faida zake, na jinsi ya kuzidhibiti kwenye CSS.

Soma Zaidi...
CSS - somo la 4: Aina za css selecto

Katika somo hili uatkwenda kujifunza aina za css selectors

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 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 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...
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 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 1: Maana ya CSS, kazi zake na historia yake

Katika somo hili utakwenda kujifunza maana ya CSS, pia nitakujulisha kazi zake. Mwisho utatambuwa historia ya CSS toka kuanzishwa.

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