Cashar 6 / 20

Display iyo Positioning — Meelaynta Curiyayaasha

Baro sifadaha display iyo position — sida walxahu meel ugu qaataan, sida loo meeleysto, iyo z-index.

Casharkani waa mid ka mid ah kuwa ugu muhiimsan dhammaan casharada — wuxuu kuu sahlayaa inaad curiyayaasha dhigto meel kasta oo aad bogga ka rabto.

Sifada display

Sifada display waxay xukuntaa sida curiyuhu boos ugu qaato bogga internetka [1].

block — Habka Sanduuqa

Wuxuu qaataa ballaca buuxa ee loo ogol yahay — wuxuuna had iyo jeer ka bilaabmaa sadar cusub:

div, p, h1, h2, h3, h4, h5, h6,
ul, ol, li, table, form,
header, nav, main, section, article, footer {
  display: block; /* Waa habka caadiga ah ee curiyayaashan */
}

/* Waxaad u beddeli kartaa curiyayaasha caadiga u ah 'inline' inay u dhaqmaan sida 'block' oo kale: */
span { display: block; }
a    { display: block; }

inline — Xariiqda Dhexdiisa

Ma qaato ballac ama dherer go’an — wuxuuna raacaa socodka qoraalka caadiga ah:

span, a, strong, em, img, button,
input, label, code { display: inline; } /* Waa habka caadiga ah ee curiyayaashan */

/* Ogow: Curiyayaasha 'inline' ah waxaad u samayn kartaa margin iyo padding dhinacyada bidix iyo midig oo kaliya (sare iyo hoose ma shaqeeyaan): */
span { margin-left: 8px; }

inline-block — Labadii Wada Jirta

Wuxuu u muuqdaa sida curiye ‘inline’ ah oo kale (isla sadarka ayuu la joogaa curiyayaasha kale) laakiin waxaa loo qeexi karaa sifooyinka width, height, margin, iyo padding:

.badhanka {
  display: inline-block;
  padding: 10px 20px;
  width: 120px;
  text-align: center;
}

/* Nav links */
nav a {
  display: inline-block;
  padding: 8px 16px;
}

none — Qari

Wuxuu curiyaha gebi ahaanba ka saaraa bogga — mana qaato wax meel ama bannaan ah:

.qari        { display: none; }
.menu-mobile { display: none; }

/* Adeegsiga Media Query — si loogu soo bandhigo aaladaha gacanta (mobile-ka): */
@media (max-width: 768px) {
  .menu-mobile { display: block; }
  .menu-desktop { display: none; }
}

Ogow Farqiga: display: none wuxuu curiyaha ka saaraa bogga gebi ahaanba, halka visibility: hidden uu qariyo curiyaha laakiin booskii uu ku fadhiyay uu wali u dhowran yahay (bannaan ahaan).

Sifada position

static — Habka Caadiga ah (Default)

Curiyuhu wuxuu u degayaa si waafaqsan socodka caadiga ah ee bogga — sifooyinka sida top, left, right, ama bottom wax saameyn ah kuma laha:

div { position: static; } /* Waa booska caadiga ah */

relative — Meesha Asalka ah (Relative)

Curiyaha waxaa laga dhaqaajin karaa meeshiisa asalka ahayd iyadoo aan la carqaladaynayn curiyayaasha kale ee ku xeeran:

.kaadhka {
  position: relative;
  top:  20px;   /* 20px hoos uga deg booska asalka ah */
  left: 10px;   /* 10px midig u soco (bidix ka fogow) */
}

Waxaa inta badan loo adeegsadaa sidii bar-tixraac loogu talagalay curiyayaasha ‘absolute’ ee ku dhex jira (carruurta):

.weelka { position: relative; }  /* Bar-tixraac */

absolute — Boosaynta Ka-madax-bannaan (Absolute)

Wuxuu booska ka dhex raadsadaa curiyaha sare (waalidka) ugu dhow ee leh position: relative (haddii la waayo waalid boosaysan, wuxuu tixraacaa bogga guud ee <html>):

.weelka {
  position: relative;
  width: 300px;
  height: 200px;
}

.calaamad {
  position: absolute;
  top:   8px;
  right: 8px;
  background: #00d97e;
  padding: 4px 8px;
  border-radius: 99px;
  font-size: 0.75rem;
}
<div class="weelka">
  <span class="calaamad">Cusub</span>
  <p>Nuxurka kaadhka</p>
</div>

fixed — Ku-dajinta Shaashadda (Fixed)

Wuxuu had iyo jeer ku dhex nagaanayaa isku boos isagoo tixraacaya daaqada bog-furaha (viewport), xitaa haddii bogga kor ama hoos loo dhaqaajiyo (scroll):

/* Haddii aad rabto inaad samayso baar-shaqo oo ku dagan dusha sare (fixed nav) */
nav {
  position: fixed;
  top:   0;
  left:  0;
  right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
}

/* Badhanka dib-ugu-laabashada dusha sare */
.dib-u-kore {
  position: fixed;
  bottom: 24px;
  right:  24px;
  width:  44px;
  height: 44px;
  border-radius: 50%;
  background: #0a0a0a;
  color: white;
  border: none;
  cursor: pointer;
}

sticky — Dajinta Is-bedbedesha (Sticky)

Curiyuhu wuxuu u dhaqmaa sida ‘relative’ caadi ah ilaa uu ka gaaro xadka (offset) loo cayimay, ka dibna wuxuu u beddelmaa sida ‘fixed’ oo kale isagoo ku dagan meesha:

/* Cinwaannada is-dajinaya (sticky headers): */
thead th {
  position: sticky;
  top: 0;
  background: #0a0a0a;
  color: white;
  z-index: 10;
}

/* Baarka dhinaca ee is-dajinaya (sticky sidebar): */
.sidebar {
  position: sticky;
  top: 80px;   /* 80px oo hoos u jirta nav-ka */
  height: fit-content;
}

top, right, bottom, left

Sifooyinkani waxay shaqeeyaan oo kaliya marka curiyuhu leeyahay position ka duwan static:

.unugga {
  position: absolute;
  top:    0;      /* Sare */
  right:  0;      /* Midig */
  bottom: 0;      /* Hoose */
  left:   0;      /* Bidix */
  /* = Daboolista gebi ahaanba curiyaha sare (waalidka) */
}

Sida Curiyaha ‘Absolute’ ah loogu dhex-geeyo dhexda:

.weelka  { position: relative; }

.dhexdhexaad {
  position: absolute;
  top:  50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Tani waxay curiyaha si sax ah ugu dhex-gaynaysaa dhexda labada jiho (toosan iyo jiifba) */
}

Lakabyada Is-dul-saaran (z-index)

Sifadani waxay xukuntaa kala-sarreynta curiyayaasha marka ay isku-dhuftaan ama isku-dul-dhacaan [1]:

/* Tirada ugu sarreysa ayaa dusha sare maraysa: */
.modal-gadaasha { z-index: 1000; }
.modal          { z-index: 1001; }
.toobbad        { z-index: 1002; }

.nav            { z-index: 100; }
.dropdown       { z-index: 101; }

/* Qiimaha caadiga ah ee curiyayaashu waa 0 */
.caadi          { z-index: 0; }

/* Ka hooseeya curiyayaasha kale (maraya xagga dambe) */
.gadaasha       { z-index: -1; }

Ogow: z-index wuxuu shaqeeyaa oo kaliya marka curiyuhu leeyahay boosayn aan ahayn position: static.

Tusaale Maqaal Dhamaystiran oo ku saabsan Display iyo Position

<!DOCTYPE html>
<html lang="so">
<head>
  <meta charset="UTF-8">
  <title>Display iyo Position</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: sans-serif; background: #f0f0f0; padding: 80px 20px 40px; }

    /* Fixed Nav */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      background: #0a0a0a;
      padding: 14px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 100;
    }
    nav .logo { color: #00d97e; font-weight: 700; }
    nav a {
      display: inline-block;
      color: #888;
      text-decoration: none;
      padding: 6px 12px;
      border-radius: 6px;
      font-size: 0.875rem;
    }
    nav a:hover { color: white; background: rgba(255,255,255,0.08); }

    /* Grid kaadhada */
    .kaadhadhka-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 20px;
      max-width: 900px;
      margin: 0 auto;
    }

    /* Kaadhka leh badge absolute */
    .kaadhka {
      position: relative;
      background: white;
      border-radius: 14px;
      border: 1px solid rgba(0,0,0,0.08);
      overflow: hidden;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .kaadhka:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.1);
    }

    .kaadhka-sawir {
      height: 160px;
      background: linear-gradient(135deg, #0a0a0a, #1a2a1a);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 3rem;
    }

    .kaadhka-nuxur { padding: 18px; }
    .kaadhka-nuxur h3 { font-size: 0.95rem; margin-bottom: 4px; }
    .kaadhka-nuxur p  { font-size: 0.8rem; color: #888; }

    /* Badge — Boosaynta absolute */
    .calaamad {
      position: absolute;
      top: 10px; right: 10px;
      background: #00d97e;
      color: #0a0a0a;
      font-size: 0.7rem;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 99px;
    }

    /* Tusaalaha baarka dhinaca ee is-dajinaya (Sticky sidebar) */
    .qaabyada {
      display: grid;
      grid-template-columns: 1fr 260px;
      gap: 24px;
      max-width: 900px;
      margin: 40px auto 0;
    }
    .nuxurka-ugu-weyn > * { background: white; border-radius: 14px; padding: 24px; margin-bottom: 16px; border: 1px solid rgba(0,0,0,0.08); }
    .sidebar-sticky {
      position: sticky;
      top: 80px;
      height: fit-content;
      background: white;
      border-radius: 14px;
      padding: 20px;
      border: 1px solid rgba(0,0,0,0.08);
    }
    .sidebar-sticky h4 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #bbb; margin-bottom: 12px; }
    .sidebar-sticky a  { display: block; font-size: 0.875rem; color: #666; text-decoration: none; padding: 6px 0; border-bottom: 1px solid #f0f0f0; }
    .sidebar-sticky a:hover { color: #00a860; }
  </style>
</head>
<body>

  <nav>
    <span class="logo">Ereyle</span>
    <div>
      <a href="#">Hoyga</a>
      <a href="#">Koorsooyinka</a>
      <a href="#">Xiriir</a>
    </div>
  </nav>

  <div class="kaadhadhka-grid">
    <div class="kaadhka">
      <div class="kaadhka-sawir">🌐</div>
      <span class="calaamad">Cusub</span>
      <div class="kaadhka-nuxur">
        <h3>HTML Basics</h3>
        <p>20 cashar · Bilow ah</p>
      </div>
    </div>
    <div class="kaadhka">
      <div class="kaadhka-sawir" style="background:linear-gradient(135deg,#1a0a2a,#2a1a0a);">🎨</div>
      <span class="calaamad" style="background:#7c3aed; color:white;">Hot</span>
      <div class="kaadhka-nuxur">
        <h3>CSS Basics</h3>
        <p>20 cashar · Bilow ah</p>
      </div>
    </div>
    <div class="kaadhka">
      <div class="kaadhka-sawir" style="background:linear-gradient(135deg,#1a1a0a,#0a1a2a);">⚡</div>
      <div class="kaadhka-nuxur">
        <h3>JavaScript</h3>
        <p>Dhowaan · Dhexe</p>
      </div>
    </div>
  </div>

  <div class="qaabyada">
    <div class="nuxurka-ugu-weyn">
      <div><h3>Qaybta 1</h3><p style="margin-top:8px;color:#666;">Nuxurka casharka...</p></div>
      <div><h3>Qaybta 2</h3><p style="margin-top:8px;color:#666;">Nuxurka casharka...</p></div>
      <div><h3>Qaybta 3</h3><p style="margin-top:8px;color:#666;">Nuxurka casharka...</p></div>
    </div>
    <div class="sidebar-sticky">
      <h4>Nuxurka</h4>
      <a href="#">Qaybta 1</a>
      <a href="#">Qaybta 2</a>
      <a href="#">Qaybta 3</a>
    </div>
  </div>

</body>
</html>

Casharka xiga: Waxaan ku baran doonaa Sida loo qaabeeyo hal-jiho (Flexbox) ee CSS.

Start today · It's free

Ready to learn
something new?

Browse community-written courses on any subject, or share your expertise by contributing on GitHub .

Browse Courses