Positioning: static, relative, absolute, fixed

 Positioning: static, relative, absolute, fixed

Marka aad bog CSS samaynayso, booska (positioning) waa mid ka mid ah waxyaabaha ugu muhiimsan ee aad isticmaali doonto. CSS waxay leedahay afar nooc oo boosayn oo muhiim ah: static, relative, absolute, iyo fixed. Mid kasta wuxuu leeyahay qaab gaar ah oo uu ku shaqeeyo, wuxuuna boggaga siinayaa fursado badan oo muuqaal ahaan la hagaajin karo.

 Positioning: static, relative, absolute, fixed

1. Static Positioning

"Static" waa booska aasaasiga ah ee walxaha websaytka ku dhisan yihiin. Walxaha booska static leh waxay isticmaalaan hab caadi ah oo isbiirsanaya walxaha kale. Ma jiraan wax gaar ah oo ku saabsan static-ka maadaama walxaha aysan guurin oo ay ku yaallaan meesha ugu horreysa ee lagu soo daray.

css

.element {
  position: static;
}

Walxaha static ma laha "top", "bottom", "left", ama "right", oo ficil ahaan, booska ugu horreeya ee walaxda waa meesha ay ku jirto isla markiiba.

2. Relative Positioning

"Relative" waxaa loola jeedaa in walaxdu booskeeda ugu dambayso halka ugu horreysa ee ay ka soo muuqato, balse waxaa loo beddeli karaa iyadoo la adeegsanayo tilmaamo sida "top", "right", "bottom", ama "left". Si kastaba ha ahaatee, booska walaxda asal ahaan wey joogtaa, laakiin isbeddel yar ayaa lagu sameyn karaa iyadoo la adeegsanayo tilmaamahaas.

css

.element {
  position: relative;
  top: 20px;
  left: 15px;
}

Tusaale ahaan, walax leh position: relative; oo leh "top: 20px;" waxay ka dhaqaaqaysaa booskeedii hore ilaa 20px sare ama hoos, iyadoo loo eegayo qodobka booska.

3. Absolute Positioning

Booska absolute wuxuu walxaha ka dhigaa kuwo si buuxda uga baxsan qulqulka caadiga ah ee bogga. Taas micneheedu waa in walaxda si xor ah loo dhigi karo meelo gaar ah iyadoo lagu saleeynayo booska waalidka ugu dhow ee leh booska aan static ahayn. Absolute wuxuu u adeegaa sidii xalka ugu fiican marka aad rabto in aad walxaha meelo go’an dhigtid oo aysan ku dhajinayn walxaha kale.

css

.element {
  position: absolute;
  top: 50px;
  right: 30px;
}

Walxaha absolute waxaa loo isticmaali karaa in lagu habeeyo walxaha sida sanduuqyada, sawirrada, iyo walxaha kale ee ay tahay in boos gaar ah lagu dhigo.

4. Fixed Positioning

"Fixed" waa booska loo adeegsado walaxaha adagi, oo had iyo jeer ku jira meeshii ay u dhigayso bogga, xitaa marka aad bogga hoos u dhaqaajiso. Walxaha leh fixed position waxay ka go’antahay meesha browser-ka isla markaana si joogto ah halkaas uga muuqanayaan.

css

.element {
  position: fixed;
  top: 10px;
  right: 10px;
}

Walxaha fixed-ka ayaa si fiican ugu habboon waxyaabaha sida navigation bars, buttons, ama walxaha kale ee aad rabto in ay ku sii muuqdaan bogga xitaa marka user-ku scroll sameeyo.

Gunaanad

Habka booska walxaha ee CSS wuxuu kuu oggolaanayaa in aad si sax ah u habeeyso walxaha boggaaga. Ku xeer walaxaha boosaska kala duwan ee "static", "relative", "absolute", iyo "fixed" si aad u hesho natiijooyin qurux badan oo wax ku ool ah.