Ereyle

Introduction to CSS Styling

Fahmida Sifada `position` ee CSS

Sifada position ee CSS waxay xakamaysaa sida curiyuhu ugu yaallo dukumeentiga HTML. Waxaa jira shan qiyam oo kala duwan oo la isticmaali karo:

static
relative
absolute
fixed
sticky

1. `static` (Caadi)

Tani waa qiimaha caadiga ah. Curiyaha lagu dejiyay position: static; kuma saameeyaan sifooyinka top, right, bottom, iyo left.


div {
  position: static;
}

2. `relative` (Qaraabo)

position: relative; wuxuu u dhaqaajiyaa curiyaha meel u dhaw booskiisii caadiga ahaa. Waxaad isticmaali kartaa top, right, bottom, iyo left si aad u dejiso meesha uu u dhaqaaqayo.


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

Tusaale ahaan, koodhka kore wuxuu u dhaqaajin doonaa curiyaha 20 pixels xagga hoose iyo 30 pixels xagga midig.

3. `absolute` (Geeska)

position: absolute; wuxuu ka saaraa curiyaha socodka caadiga ah ee dukumeentiga, wuxuuna ku saleeyaa booskiisa curiyaha ugu dhow ee leh position aan ahayn static. Haddii aysan jirin curiye waalid oo leh boos go'an, wuxuu ku saleysnaan doonaa <html>.


.waalid {
  position: relative;
}
.ilmo {
position: absolute;
top: 10px;
right: 0;
}

Tusaale ahaan, .ilmo wuxuu ku yaallaa geeska sare ee midig ee .waalid.

4. `fixed` (Go'an)

position: fixed; wuxuu ka saaraa curiyaha socodka caadiga ah, wuxuuna ku xiraa booskiisa daaqadda biraawsarka. Wuxuu ku sii jiraa meel isku mid ah xitaa marka bogga la rogayo.


div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

Tusaale ahaan, koodhka kore wuxuu abuuraa bar hoose oo ku taal xagga hoose ee daaqadda.

5. `sticky` (Dhegdheg)

position: sticky; wuxuu u dhexeeyaa relative iyo fixed. Curiyuhu wuxuu marka hore raacaa socodka caadiga ah, laakiin marka la rogo, wuxuu noqdaa mid go'an marka uu gaaro meel gaar ah.


div {
  position: sticky;
  top: 0;
  background-color: white;
}

Tusaale ahaan, koodhka kore wuxuu ka dhigayaa curiyaha mid dhegdheg ah marka uu gaaro xagga sare ee daaqadda.

Previous Lesson