Meelaynta Walxaha

Casharkaan, waxaan baran doonaa sida loo meeleeyo (position) walxaha CSS-ka. Meelayntu waxay kuu ogolaanaysaa inaad go’aamiso halka saxda ah ee shayga bogga ku yaal.

1. Sifada Position

Sifada position waxay qeexdaa habka meelaynta shayga. Waxay leedahay 5 qiime:

2. Static (Caadiga ah) — Tan Asalka ah

Dhammaan curiyayaasha ayaa static ah isagoo haddii aad u sheegin.

div {
    position: static;  /* kan waa tan caadiga ah */
}

Curiyaha static wuxuu raacaa socodka caadiga ah ee bogga (normal document flow).

3. Relative (La xiriirta)

Waxay u ogolaataa shayga inuu ka baxo booskiisa caadiga ah isagoo weli ku jira socodka.

.box {
    position: relative;
    top: 20px;      /* 20px ka hoos socodka caadiga ah */
    left: 30px;     /* 30px ka midig socodka caadiga ah */
}

Muhiim: Booska asalka ah waa uu hadhay (bannaan baan laga qaadin).

4. Absolute (Go’an)

Shayga absolute wuxuu ka baxaa gabi ahaan socodka caadiga ah. Wuxuu isticmaalaa waalidkiisa ugu dhaw ee relative ah (ama body haddii uusan jirin).

.parent {
    position: relative;  /* salka loogu talagalay */
}

.child {
    position: absolute;
    top: 0;
    right: 0;           /* ku dhaji dusha midig ee waalidka */
}

5. Fixed (Go’an)

Shayga fixed wuxuu kaga go’an yahay daaqada biraawsarka — kuma socodsiiyo bogga (stays fixed on scroll).

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 1000;   /* si ay ugu sarreyso wax kasta */
}

6. Sticky

Sticky waa isku-dhafka relative iyo fixed. Wuxuu u shaqeeyaa relative ilaa uu gaaro heer go’an, ka dibna wuxuu noqdaa fixed.

.sidebar {
    position: sticky;
    top: 20px;  /* wuxuu ku dhaganaa marka 20px laga gaaro xaga sare */
}

7. Z-Index (Heerka Sarreynta)

Marka curiyayaasha is daboolaan, z-index waxay go’aamisaa kii kor socda. Qiimaha sare = kor.

.modal {
    position: fixed;
    z-index: 999;
}

Layli (Practice)

1. Abuur navbar fixed ah oo xaga sare ah.
2. Abuur sanduuq relative ah, gudihiisana ku dar sanduuq absolute ah oo xaga midig sare ku yaal.
3. Abuur sidebar sticky ah.
4. Isticmaal z-index si aad u xakameyso daboolida curiyayaasha.

Sii wadashada: Casharka xigta, waxaan baran doonaa Flexbox — habka casriga ah ee walxaha loo qaabeeyo!