position

Static

Çdo element, nëse nuk specifikohet ndryshe, ka pozitë statike. 

Me position:static mundësohet që pozita e një elementi në sistemin koordinativ të faqes të determinohet nga pozita edhe dimensionet e elementit paraprak.

Nëse elementi paraprak rritet në lartësi, elementi në vijim ulet më poshtë; nëse lartësia e elementit paraprak zvogëlohet – elementi vijues ngritet më lartë. 

Pra, me position:static nuk përdorim fare koordinata X dhe Y (left dhe top), ndërsa elementet vendosen në faqe në varësi prej dimensioneve të elementeve që u paraprijnë.

#elementi {
position: static;
}

Relative

Pozita relative në esencë nuk dallon shumë nga pozita statike.

Diferenca ndërmjet position:relative dhe position:static qëndron në faktin se tek position:relative kemi në dispozicion edhe 4 veti më tepër: top, right, bottom dhe left, të cilat mundësojnë zhvendosjen e elementit në kahjet korresponduese, njëkohësisht duke e ruajtur edhe sipërfaqen që e zë në pozitën static.

#elementi {
position: relative;
}

Absolute

Elementi me position:absolute mund të pozicionet brenda prindit të tij duke përdorur koordinata. 

Koordinatat e elementit janë relative kundrejt prindit të tij, ndërsa vetë prindi nuk duhet të ketë pozitë static, dhe për këtë zakonisht prindit ia caktojmë pozitën relative

Vendosjen në koordinatat e dëshiruara e bëjmë me left për boshtin horizontal, ndërsa me top për boshtin vertikal.

Duhet cekur se elementi me pozitën absolute nuk e ndjek rrjedhën e dokumentit, respektivisht elementet në vijim nuk shtyhen teposhtë por rrijnë paralel me elementin e zgjedhur përgjatë boshtit Z.

Nëse dy elemente me pozitë absolute vendosen njëri përmbi tjetrin, njëri element do ta mbulojë tjetrin në sipërfaqen ku priten. Më sipër përgjatë boshtit Z del ai element që është më poshtë në kod.

Për ta ndryshuar këtë sjellje, elementit të dëshiruar ia ndryshojmë vetinë z-index, ku ai element që ka z-index më të madh (si numër i plotë: 1, 2, 3,…), ai do ta “mbulojë” tjetrin.

Nëse nuk specifikohet z-index në CSS, z-indeksi i elementeve është numër rendor që rritet për 1 për secilin element vijues, ashtu siç janë të shënuar në kod.

Për një element që dëshirojmë të jetë përmbi të gjitha elementet tjera, ia caktojmë një z-index me vlerë të madhe, p.sh. 9999.

Për një element që dëshirojmë të jetë “mbrapa” të gjitha elementeve tjera, ia caktojm z-index me vlerë negative, p.sh. -9999.

Nëse faqes i bëjmë “scroll”, elementi me pozitën absolute do të lëvizë bashkë me elementet tjera statike të faqes.

#elementi {
position: absolute;
}

Shembull.

Fixed

Pozita fixed është i njëjtë i pozita absolute, me dallimin që si zanafillë të sistemit koordinativ e merr pozitën top-left të elementit body.

Një element të cilit dëshirojmë t’ia japim pozitën fixed, nuk kemi nevojë ta vendosim si “fëmijë” të një elementi tjetër.

Nëse elementi e ka këtë pozitë, ai do të rrijë i fiksuar në koordinatë të caktuar në faqe dhe në të nuk do të ndikojë “scroll”.

#elementi {
position: fixed;
}

Shembull.

Sticky

Elementi me pozitë sticky është një miks ndërmjet static dhe fixed

Për aq kohë sa elementet paraprijëse janë brenda fushëpamjes së faqes, elementi me pozitë sticky do të veprojë sikur të ishte me pozitën static.

Nëse duke bërë scroll down, elementet paraprijëse dalin “përmbi” fushëpamjes, elementi që ka pozitën sticky, do të ngelë pjesën më të sipërme të faqes dhe nuk do të largohet nga faqja.

E përshtatshme për menutë që dëshirojmë të ngelin brenda faqes, pa marrë parasysh se ku gjenden elementet e tjera.

#elementi {
position: sticky;
}

Shembull.

Tahir Hoxha

All Rights Reserved Theme by 404 THEME.