,

,

,

... Etiketë
përdoret shpesh në paraqitjen e faqeve moderne për të krijuar rrjete dhe thjesht tregon një lloj blloku ose kontejneri. Lejohet të futen etiketa të tjera në të, gjë që nuk është e mundur me të gjithë elementët e bllokut, prandaj
i përshtatshëm për t'u përdorur. Blloqet zakonisht vendosen njëra mbi tjetrën dhe nuk janë të vendosura brenda elementeve të linjës. Elementet inline HTML përfshijnë tekstin dhe CSS përdoret për ta stiluar atë.
Për një gjerësi të caktuar të përmbajtjes, gjerësia totale e bllokut është shuma e mbushjes majtas dhe djathtas, kufijve, kufijve dhe gjerësisë. Në një lartësi të caktuar, nga mbushja e sipërme dhe e poshtme, kufijtë, kufijtë dhe lartësia. Teksti në elementet e bllokut lihet i rreshtuar si parazgjedhje. Nëse njëri prej tyre përmban elementë inline së bashku me elementët e bllokut, atëherë krijohet një bllok anonim rreth elementeve inline. Stili i paracaktuar do të zbatohet për të. Ai gjithashtu do të trashëgojë stilin e dhënë që i është caktuar prindit të tij.
Rrjedha e dokumentit
Rrjedha i referohet rendit në të cilin elementet e faqes shfaqen, siç përcaktohet nga vetitë e specifikuara në CSS. Në këtë rast, si parazgjedhje, blloqet rreshtohen nga lart poshtë, dhe etiketat inline, nëse nuk ka hapësirë ​​të mjaftueshme, transferohen në linjë e re dhe janë të renditura nga lart poshtë dhe nga e majta në të djathtë. Pozicioni i një elementi në faqe varet nga vendi i tij në kod: sa më i lartë të jetë, aq më herët është. Secili prej elementeve të bllokut duket si një drejtkëndësh që i largon ato fqinje nga vetja. Ju mund ta ndryshoni këtë sjellje duke përdorur veçori të veçanta. Përafrimi i kutive të caktuara në CSS në qendër ose anët e një kontejneri quhet pozicionim.
Elementet e pozicionimit
Pozicioni i blloqeve mund të kontrollohet duke përdorur pozicionimin absolut dhe relativ. Pozicionimi përdoret për të pozicionuar seksione të mëdha në një faqe në një mënyrë specifike për të krijuar ndërfaqe komplekse, dritare kërcyese dhe elemente dekorative. Vetia kryesore e përdorur për pozicionimin e kutive në CSS është pozicioni. Ka katër veti kryesore:
• i afërm;
• absolute;
• fikse;
• statike.
Me ndihmën e tyre, ju mund të ndërroni mënyrat e paraqitjes duke specifikuar një nga katër parametrat: lart, djathtas, poshtë ose majtas. Ekziston gjithashtu një pronë për renditjen e shtresave - z-index. Pozicionimi me vetinë statike zakonisht nuk përdoret, pasi tregon pozicionimin e paracaktuar të blloqeve. Prandaj, përdorimi i ndonjë parametri nuk ndikon në asnjë mënyrë. Tre vetitë e tjera përdoren për paraqitjen: relative, absolute, fikse.
Pozicionimi relativ
Pozicionimi relativ i kutive në CSS, domethënë pozicioni: veti relative, do të thotë që elementi mund të zhvendoset dhe ndryshohet nga pozicioni i tij origjinal. Një bllok i tillë mbetet ende në rrjedhë. Në fakt, nuk është ai vetë që zhvendoset, por kopja e tij. Vendosni vlerat e vetive për të specifikuar saktësisht se sa blloku do të lëvizë në njërën anë ose në tjetrën. Më shpesh ato maten në piksel. Por lejohet përdorimi i njësive të tjera gjithashtu.

Përdorimi i vetive me pozicionim relativ
Vetia e sipërme e zhvendos kopjen e një blloku specifik lart ose poshtë me numrin e pikselëve të specifikuar në veti. Kur e përdorni, elementët e vendosur poshtë ose sipër mbeten në vendet e tyre, pasi në fakt blloku i zhvendosur nuk lëviz askund.
Vetia e poshtme kompenson kutinë në drejtim të kundërt me vetinë e sipërme. Një vlerë pozitive ndihmon për ta ngritur atë, dhe një vlerë negative e zhvendos atë poshtë. Vetitë djathtas dhe majtas e lëvizin elementin përkatësisht djathtas dhe majtas. Duke i kombinuar të gjitha, ju mund t'i jepni bllokut një pozicion të saktë në faqe duke e zhvendosur atë përgjatë boshteve të koordinatave vertikale dhe horizontale. Nëse rritni kufijtë, ato do të llogariten jo nga buza e vetë bllokut, por nga zhvendosja e tij në anën e kopjes.

Pozicionimi absolut
Pozicionimi absolut i kutive në CSS përcaktohet nga vlera absolute e vetive të pozicionit. Një element që është absolutisht i pozicionuar bie jashtë rrjedhës së dokumentit dhe zëvendësohet nga blloqe ngjitur. Gjerësia e një elementi të tillë shtrihet në varësi të përmbajtjes së tij, dhe ju mund ta zhvendosni atë duke vendosur vlera të caktuara për vetitë e sipërme, majtas, djathtas, poshtë. Pozicionimi absolut i kutisë CSS është i dobishëm për titujt. Por pozicioni: absolute funksionon jo vetëm për elementët e bllokut, por edhe për elementët inline.
Rreshtimi i artikujve në qendër
Një element i pozicionuar absolutisht inline do të sillet saktësisht njësoj si një element inline. Prandaj, përdorimi i pozicionimit mund të kontrollohet në CSS dhe tekst. Disa veti të reja mund të aplikohen në të, për shembull, për të ndryshuar lartësinë dhe gjerësinë. CSS përdor një kombinim të disa veçorive për të përqendruar dhe lidhur vertikalisht. Kontrollon shtrirjen vertikale të veçorisë së sipërme. Nëse dëshironi të vendosni një bllok në CSS në qendër, kontejneri kryesor duhet të jetë relativisht i pozicionuar dhe elementi që po rreshtohet duhet të jetë absolutisht i pozicionuar. Kontejneri duhet të vendoset në krye: veti 50% dhe për ta zhvendosur elementin gjysmën e lartësisë së tij, përdorni veçorinë translate me vlerën "0, -50%". Elementët e pozicionuar absolutisht mund të dallohen në lloj i ri, pasi për to aplikohen vetitë që nuk janë të disponueshme për lloje të tjera pozicionimi.

Pozicionimi në lidhje me këndin e sipërm të majtë të shfletuesit
Karakteristikat majtas, lart, djathtas dhe poshtë funksionojnë ndryshe me elementë të pozicionuar absolutisht dhe relativisht. Për elementet relative, këto veti vendosin kompensimin në lidhje me vendin ku ndodhet elementi. Absolutisht i promovuar renditet relativisht një sistem të veçantë koordinatat e lidhura me madhësinë e dritares së shfletuesit. Pikat e fillimit të këtij sistemi janë qoshet e dritares. Kur përdorni veçorinë e majtë, mbushja do të matet nga ana e majtë e shfletuesit, por shiriti i lëvizjes nuk do të shfaqet. Vetia kryesore, kur pozicionohet absolutisht, vendos mbushjen nga maja e shfletuesit në krye të elementit në të cilin është aplikuar. Duke kombinuar të dyja vetitë, elementi mund të zhvendoset në lidhje me këndin e sipërm të majtë të shfletuesit.

Pozicionimi në lidhje me këndin e sipërm të djathtë të shfletuesit
Në mënyrë të ngjashme, duke përdorur vetitë e djathta dhe të sipërme, mund të lidhni një element në anën e djathtë të dritares së shfletuesit dhe të ndryshoni pozicionin e tij vertikalisht, duke e zhvendosur atë në këndin e sipërm të djathtë. Nëse vlera e pronës së duhur është negative, blloku do të lëvizë jashtë kufirit të dritares. Pas kësaj, duhet të shfaqet një shirit lëvizës. Vetia e poshtme përdoret për të lëvizur elementin poshtë. Vendos dhëmbëzimin nga skaji i poshtëm i dritares së shfletuesit deri në fund të bllokut. Nëse vlera është negative, shfaqet gjithashtu një shirit lëvizës, pasi elementi është zhvendosur përtej kufirit të poshtëm të dritares së shfletuesit.
Sistemi i koordinatave për pozicionimin absolut
Si parazgjedhje, të gjithë elementët me pozicionim absolut janë të ankoruar në të njëjtin sistem koordinativ - dritarja e shfletuesit. Por mund të ndryshohet duke vendosur pozicionimin relativ për çdo element prind. Pastaj blloku i fëmijëve do të ndryshojë vendndodhjen e tij në varësi të prindit. Nëse ndër elementët mëmë ka disa me pozicionim relativ, atëherë numërimi bëhet nga ai më i afërti. Në këtë rast, pozicionimi i paracaktuar do të bazohet në atë që është specifikuar në etiketën e trupit.

Origjina për një element absolutisht të pozicionuar
Përpara se një elementi t'i jepej pozicionimi absolut, ai në një vend quhej një origjinë e nënkuptuar. Nëse nuk janë caktuar veçori për një bllok të tillë, ai nuk do të lëvizë. Mund ta kompensoni atë duke vendosur vetinë e marzhit. Punon në të njëjtën mënyrë si vetitë e pozicionimit. Nëse nuk e përcaktoni vlerën e pronës së mbetur dhe të gjithë të tjerave, atëherë ajo do të jetë e barabartë me auto. Gjithashtu, duke përdorur automatik, mund t'i ktheni elementët në të tyret vendet e mëparshme.

Pozicionimi i fiksuar
Një vlerë tjetër është fikse. Vetia e pozicionit ankoron një element në një vendndodhje specifike. Pozicionimi fiks përdoret shpesh për të krijuar meny në CSS. Duket si një absolut, por blloku fiks bie jashtë rrjedhës. Edhe kur faqja lëviz, një element i tillë do të mbetet në vend, kështu që është i përshtatshëm për ta përdorur atë për krijimin e menyve në CSS. Pika e fillimit do të ankorohet në dritaren e shfletuesit. Nëse ka disa blloqe të pozicionuara, vetia z-index përdoret për t'i rregulluar ato. Kjo ju lejon të mbivendosni blloqet relative me blloqet absolute duke u dhënë atyre një indeks të duhur të numrit të plotë. Sa më i madh të jetë, aq më i lartë do të jetë blloku.
Pozicionimi është një nga konceptet kryesore v faqosja e bllokut... Pasi të jeni marrë me të, shumë do të bëhen të qarta për ju, dhe faqosja nga shamanizmi do të kthehet në një proces kuptimplotë. Pra, ky artikull do të fokusohet në vetitë CSS. pozicion dhe noton.
1.pozicioni: statik
Si parazgjedhje, të gjithë elementët në faqe janë të pozicionuar në mënyrë statike (pozicioni: statik), që do të thotë se elementi nuk është i pozicionuar dhe shfaqet në dokument në vendin e tij të zakonshëm, domethënë në të njëjtin rend si në shënimin html.
Nuk ka nevojë t'ia caktoni në mënyrë specifike këtë veçori ndonjë elementi, përveç nëse keni nevojë të ndryshoni një pozicionim të vendosur më parë në parazgjedhje.
#përmbajtje (pozicioni: statik;)
2. pozicioni: i afërm
Pozicioni: relative ju lejon të përdorni vetitë e sipërme, të poshtme, majtas dhe djathtas për të pozicionuar një element në lidhje me vendin ku do të shfaqej në pozicionimin normal.
Le të lëvizim #content 20 piksele poshtë dhe 40 pikselë majtas:
#përmbajtje (pozicioni: relative; lart: 20 px; majtas: -40 px;)

Vini re se tani ka hapësirë ​​boshe ku duhet të ishte blloku ynë #përmbajtje. Pas bllokut #content, blloku #footer nuk u zhvendos poshtë, sepse #content ende zë vend në dokument, pavarësisht se e zhvendosëm.
Në këtë fazë, mund të duket se pozicionimi relativ nuk është aq i dobishëm, por mos nxitoni në përfundime, më vonë në artikull do të zbuloni se për çfarë mund të përdoret.
3.pozicioni: absolut
Në pozicionim absolut(pozicioni: absolut), elementi hiqet nga dokumenti dhe shfaqet aty ku e tregoni.
Le ta zhvendosim bllokun # div-1a në këndin e sipërm djathtas të faqes si shembull:
# div-1a (pozicioni: absolute; lart: 0; djathtas: 0; gjerësia: 200 px;)

Vini re se këtë herë, për shkak se blloku # div-1a është hequr nga dokumenti, elementët e mbetur në faqe janë pozicionuar ndryshe: # div-1b, # div-1c dhe #footer janë zhvendosur lart atje ku është fshirë blloku ishte. Dhe vetë blloku # div-1a ndodhet saktësisht në të djathtë, këndi i sipërm faqet.
Kështu, ne mund të pozicionojmë çdo element në lidhje me faqen, por kjo nuk mjafton. Në fakt, ne duhet të pozicionojmë # div-1a në lidhje me bllokun prind #content. Dhe në këtë pikë, pozicionimi relativ hyn përsëri në lojë.
4.pozicioni: fiks
Pozicionimi fiks (pozicioni: fiks) është një nënseksion i pozicionimit absolut. Dallimi i tij i vetëm është se është gjithmonë në zonën e dukshme të ekranit dhe nuk lëviz gjatë lëvizjes së faqes. Në këtë drejtim, duket pak si një imazh i fiksuar i sfondit.
# div-1a (pozicioni: fiks; lart: 0; djathtas: 0; gjerësia: 200 px;)

Në IE me pozicion: fiks, jo gjithçka është aq e qetë sa do të donim, por ka shume menyra kapërceni këto kufizime.
5.pozicioni: relativ + pozicioni: absolut
Duke caktuar pozicionin: në lidhje me bllokun #content, ne mund të pozicionojmë çdo element fëmijë në lidhje me kufijtë e tij. Le të vendosim bllokun # div-1a në këndin e sipërm djathtas të bllokut #content.
#përmbajtje (pozicioni: relative;) # div-1a (pozicioni: absolut; lart: 0; djathtas: 0; gjerësia: 200 px;)

6. Dy kolona
Të armatosur me njohuritë nga hapat e mëparshëm, mund të provoni të bëni dy kolona duke përdorur pozicionimin relativ dhe absolut.
#përmbajtje (pozicioni: relative;) # div-1a (pozicioni: absolute; lart: 0; djathtas: 0; gjerësia: 200 px;) # div-1b (pozicioni: absolute; lart: 0; majtas: 0; gjerësia: 200 px ;)

Një nga avantazhet e pozicionimit absolut është aftësia për të vendosur artikuj renditje e rastësishme, pa marrë parasysh se si ato janë paraqitur në shënim. Në shembullin e mësipërm, blloku # div-1b është i pozicionuar përpara bllokut # div-1a.
Dhe tani duhet të keni një pyetje: "Ku shkuan pjesa tjetër e elementeve nga shembulli ynë?". Ata u fshehën nën blloqe të pozicionuara absolutisht. Për fat të mirë, ekziston një mënyrë për ta rregulluar këtë.
7. Dy kolona me lartësi fikse
Një zgjidhje është vendosja e kontejnerit që përmban kolonat në një lartësi fikse.
#përmbajtje (pozicioni: relative; lartësia: 450 px;) # div-1a (pozicioni: absolute; lart: 0; djathtas: 0; gjerësia: 200 px;) # div-1b (pozicioni: absolute; lart: 0; majtas: 0 ; gjerësia: 200 px;)

Zgjidhja nuk është shumë e përshtatshme, pasi nuk e dimë kurrë paraprakisht se çfarë madhësie do të vendoset teksti në kolona dhe çfarë fonti do të përdoret.
8. Noton
Për kolonat me lartësi të ndryshueshme, pozicionimi absolut nuk është i përshtatshëm, kështu që le të shohim një opsion tjetër.
Duke e lëvizur bllokun, ne e shtyjmë atë në skajin e djathtë (ose të majtë) sa më shumë që të jetë e mundur dhe teksti pas bllokut do të mbështillet rreth tij. Kjo zakonisht përdoret për fotografi, por ne do ta përdorim për më shumë detyrë e vështirë pasi ky është i vetmi mjet në dispozicionin tonë.
# div-1a (lundrues: majtas; gjerësia: 200 px;)

9. Altoparlantët "lundrues".
Nëse caktojmë float: majtas në bllokun e parë, dhe pastaj float: majtas në të dytin, secili prej blloqeve do të struket në skajin e majtë dhe do të marrim dy kolona, ​​me lartësi të ndryshueshme.
# div-1a (lundrues: majtas; gjerësia: 150 px;) # div-1b (lundrues: majtas; gjerësia: 150 px;)

Gjithashtu, mund t'i caktoni të kundërtën kolonave. vlerë notuese, në këtë rast, ato do të shpërndahen përgjatë skajeve të enës.
# div-1a (lundrues: djathtas; gjerësia: 150 px;) # div-1b (lundrues: majtas; gjerësia: 150 px;)

Por tani kemi një problem tjetër - kolonat shkojnë përtej kontejnerit mëmë, duke thyer kështu të gjithë paraqitjen. Ky është problemi më i zakonshëm për projektuesit fillestarë të paraqitjes, megjithëse mund të zgjidhet mjaft thjesht.
10. Noton pastrimi
Pastrimi i notit mund të bëhet në dy mënyra. Nëse pas kolonave ka një bllok tjetër, mjafton të caktoni qartë: të dyja për të.
# div-1a (lundrues: majtas; gjerësia: 190 px;) # div-1b (lundrues: majtas; gjerësia: 190 px;) # div-1c (e qartë: të dyja;)
Ose, cakto vetinë e tejmbushjes: të fshehur në kontejnerin prind
#përmbajtje (mbushje: e fshehur;)
Sido që të jetë, rezultati do të jetë i njëjtë.

konkluzioni
Sot u morën parasysh vetëm teknikat bazë të pozicionimit, dhe më së shumti shembuj të thjeshtë... Gjithashtu, për të ndihmuar dizajnerët fillestarë të paraqitjes, unë rekomandoj gjithmonë një seri artikujsh nga Ivan Sagalaev, të cilat në një kohë më ndihmuan shumë.
15.03.2017
Ende jo


Pershendetje te gjitheve!
Në tutorialin e sotëm, do t'ju tregoj se si mund të poziciononi një element kudo në ekran duke përdorur pozicionimin e bllokut.
Çfarë na jep pozicionimi i bllokut? Duke pozicionuar blloqet, botuesi do të jetë në gjendje të krijojë ndonjë dizajn unik faqe, duke vendosur blloqe ku të dojë. Për të vendosur blloqe kudo në ekran, thjesht specifikoni koordinatat.
Koordinatat në CSS
pronë"TOP» | « LARTË» | « E DREJTË» | « POSHTET »
Koordinatat duhet të përshkruhen për pozicionimin e blloqeve, pra ku do të vendoset blloku.
Diagrami i sistemit të koordinatave:

Koordinatat tregohen nga katër rregulla:
• krye- lart;
• majtas- majtas;
• drejtë- e drejtë;
• fund- poshtë.
Sintaksë:
Rregulla_Koordinata: vlera_koordinata;
Kuptimi:
Specifikoni vlerën në px ose%.
Top: 100px; / * diferenca e sipërme * / majtas: 100 px; / * skaji i majtë * /
Mjafton vetëm të specifikoni koordinatat në dy skaje (sipër ose poshtë, majtas ose djathtas).
Pozicionimi në CSS

pronë"POZICIONI »
Pozicionimi shkruhet në CSS përmes rregullit "pozicion" me vlerën e dëshiruar.
Sintaksë:
Pozicioni: vlera;
Kuptimi:
• absolute- absolute;
• i afërm- i afërm;
• fikse- fikse.
Le të kalojmë nëpër secilën vlerë.


kuptimi " ABSOLUTE "
Pozicionimi absolut i lejon webmasterit të vendosë blloqe në një faqe ueb kudo në ekran. Mjafton të shkruani rregullin "pozicion" në CSS me vlerën "absolute" dhe koordinatat e dëshiruara:
Pozicioni: absolut; / * pozicionimi absolut * /

Rezultati:



kuptimi "RELATIV »
Pozicionimi relativ i lejon webmasterit të lëvizë një bllok në një faqe interneti, por hapësira origjinale e bllokut nuk lirohet për një element tjetër. Në CSS, shtoni rregullin "pozicion" me vlerën "relative" dhe koordinatat e dëshiruara:
Pozicioni: i afërm; / * pozicionimi relativ * /

CSS do të thotë Cascading Style Sheets. CSS përshkruan se si elementët HTML duhet të shfaqen në ekran, letër ose në media të tjera. CSS kursen shumë punë. Ai mund të kontrollojë paraqitjen e faqeve të shumta të internetit të gjitha menjëherë. CSS mund t'i shtohet elementeve HTML në 3 mënyra: Inline - duke përdorur atributin e stilit në elementët HTML të brendshëm - duke përdorur një element në seksionin e jashtëm - duke përdorur një skedar të jashtëm CSS Mënyra më e zakonshme për të shtuar CSS, është mbajtja e stilet në skedarë të veçantë CSS. Sidoqoftë, këtu do të përdorim stilimin e brendshëm dhe të brendshëm, sepse kjo është më e lehtë për t'u demonstruar dhe më e lehtë për ty ta provoni vetë.
Rezultati:

E paracaktuar

Pozicionimi relativ
Pozicionimi i fiksuar në CSS

Vlera "FIKES"
Pozicionimi fiks i lejon webmasterit të vendosë blloqe në faqen e internetit kudo në ekran dhe kur lëviz faqen e internetit, blloku do të pozicionohet gjithmonë në lidhje me dritaren e shfletuesit (ai do të jetë gjithmonë i dukshëm në ekran). Mjafton të shkruani rregullin "pozicion" në CSS me vlerën "fikse" dhe koordinatat e dëshiruara:
Pozicioni: fiks; / * pozicionim fiks * /

CSS do të thotë Cascading Style Sheets. CSS përshkruan se si elementët HTML duhet të shfaqen në ekran, letër ose në media të tjera. CSS kursen shumë punë. Ai mund të kontrollojë paraqitjen e faqeve të shumta të internetit të gjitha menjëherë. CSS mund t'i shtohet elementeve HTML në 3 mënyra: Inline - duke përdorur atributin e stilit në elementët HTML të brendshëm - duke përdorur një element në seksionin e jashtëm - duke përdorur një skedar të jashtëm CSS Mënyra më e zakonshme për të shtuar CSS, është mbajtja e stilet në skedarë të veçantë CSS. Sidoqoftë, këtu do të përdorim stilimin e brendshëm dhe të brendshëm, sepse kjo është më e lehtë për t'u demonstruar dhe më e lehtë për ju ta provoni vetë.
Nëse rezultati nuk është i dukshëm dhe i pakuptueshëm, shtoni tekst të mjaftueshëm në mënyrë që një shirit lëvizës të shfaqet në ekranin e faqes së internetit.
Kështu e mbaruam mësimin! Kanë mbetur edhe 2-3 mësime dhe do të mbaroni mastering Bazat e CSS... Kjo do të thotë që ju mund të krijoni faqe interneti të bukura me lehtësi.
Mos humbisni pjesën tjetër të mësimeve! Regjistrohu për përditësimet!
Postimi i mëparshëm
Postimi i radhës

Zhvilluesit e uebit këto ditë mund të ndërtojnë paraqitje komplekse të faqeve të internetit duke përdorur teknika të ndryshme CSS. Disa nga këto teknika kanë histori e gjatë(float), të tjerët (flexbox) arritën popullaritet në vitet e fundit.
Në këtë artikull, ne do t'i hedhim një vështrim nga afër disa nga gjërat pak të njohura rreth pozicionimit të CSS.
Para se të fillojmë, le të hedhim një vështrim të shpejtë në bazat. tipe te ndryshme pozicionimi.
Pasqyrë e metodave të disponueshme të pozicionimit
Vetia CSS pozicioni përcakton llojin e pozicionimit të elementit.
Opsionet e pozicionimit
static është vlera e paracaktuar e vetive të pozicionimit. Ne raportojmë se ky element nuk përdor pozicionimin - pozicionimi zbatohet vetëm nëse vendosni një lloj pozicionimi të ndryshëm nga ai i paracaktuar.
Për ta bërë këtë, vendosni veçorinë e pozicionit në një nga vlerat e mëposhtme:
• i afërm
• absolute
• fikse
• ngjitës
Dhe vetëm pasi të vendosni pozicionimin, mund të përdorni vetitë që kompensojnë elementin:
• drejtë
• fund
• Vlera fillestare nga këto prona - fjalë kyçe auto.
Duhet të kihet parasysh se nëse një element ka vetinë e pozicionit të vendosur në absolute ose fikse, atëherë ai është një element absolutisht i pozicionuar. Gjithashtu, për elementët e pozicionuar, vetia z-index fillon të funksionojë, e cila përcakton rendin e mbivendosjes.
Dallimet midis metodave bazë të pozicionimit
Tani le të shohim shpejt tre dallimet themelore ndërmjet llojet e disponueshme pozicionimi:
• Elementët e pozicionuar absolutisht hiqen plotësisht nga rrjedha, dhe fqinjët e tyre më të afërt zënë vendin e tyre.
• të pozicionuar relativisht (relativ) dhe të ngjitur (ngjitës) mbajnë vendin e tyre në përrua dhe fqinjët e tyre më të afërt nuk e zënë atë. Megjithatë, mbushja e këtyre elementeve nuk zë hapësirë, por injorohet plotësisht nga elementët e tjerë dhe kjo mund të rezultojë në mbivendosje të elementeve.
• elementet fikse (dhe pozicionimi fiks është një lloj absolut) pozicionohen gjithmonë në lidhje me pamjen (duke injoruar pozicionimin e paraardhësve), ndërsa elementët e ngjitur pozicionohen në lidhje me paraardhësin më të afërt të lëvizjes (mbushja: automatik). Dhe vetëm në mungesë të paraardhësve të tillë, ata pozicionohen në lidhje me zonën e dukshmërisë.
Kjo mund të shihet më në detaje në demo:
Shënim: Pozicionimi i "elementeve ngjitës" është ende një teknologji eksperimentale me mbështetje të kufizuar të shfletuesit. Sigurisht, nëse dëshironi, mund të përdorni polifillin për të shtuar këtë funksionalitet në shfletues, por duke pasur parasysh përhapjen e ulët të tij, kjo pronë nuk do të diskutohet në këtë artikull.
Elementet e pozicionimit me tip pozicionimi absolut
Jam i sigurt se shumica e njerëzve e dinë se si funksionon pozicionimi absolut. Megjithatë, shumë gjëra në lidhje me të mund të jenë konfuze për fillestarët.
Kështu që vendosa të filloj me të kur përshkruaj veçori pozicionimi pak të njohura.
Pra, një element i pozicionuar absolutisht kompensohet nga paraardhësi i tij më i afërt i pozicionuar. Sigurisht, kjo funksionon nëse ndonjë prej paraardhësve ka një pozicion të ndryshëm nga ai statik - nëse elementi nuk ka paraardhës të pozicionuar, ai zhvendoset nga porta e shikimit.
Kjo është demonstruar shembullin e mëposhtëm:
Në këtë demonstrim, kutia e gjelbër fillimisht pozicionohet me kufij absolutisht zero në fund: 0 dhe majtas: 0, paraardhësi i saj (kutia e kuqe) nuk ishte fare i pozicionuar.
Megjithatë, ne kemi pozicionuar relativisht mbështjellësin e jashtëm (një element jumbotron). Vini re se si ndryshon pozicionimi i kutisë së gjelbër kur ndryshon lloji i pozicionimit të paraardhësve të tij.
Elementet e pozicionuar absolutisht injorojnë vetinë float
Nëse aplikojmë pozicionim absolut ose fiks në një element të lundruar, vetia float do të vendoset në asnjë. Nga ana tjetër, nëse vendosim pozicionimin relativ, elementi do të mbetet lundrues.
Hidhini një sy demonstrimit përkatës:
Në këtë shembull, ne përcaktojmë dy elemente të ndryshme duke lundruar në të djathtë. Vini re se kur kutia e kuqe pozicionohet absolutisht, ajo injoron vlerën float, ndërsa kutia e gjelbër relativisht e pozicionuar ruan vlerën float.
Elementet inline të pozicionuar absolutisht bëhen në nivel blloku
Një element inline me pozicionim absolut ose fiks merr vetitë e një elementi blloku. Për detaje mbi konvertimin e elementeve inline në elementë bllok, shihni tabelën.
V në këtë rast ne kemi krijuar dy elementë të ndryshëm. I pari (blloku i gjelbër) është një element blloku, dhe i dyti (blloku i kuq) është një element inline. Fillimisht duket vetëm blloku i gjelbër.
Kutia e kuqe nuk është e dukshme sepse veçoritë e gjerësisë dhe lartësisë të vendosura në të funksionojnë vetëm në elementë bllok dhe inline, dhe meqenëse nuk ka përmbajtje, nuk ka dimensione.
Kur bllokut të kuq i caktohet pozicionimi absolut ose fiks, ai bëhet bllok dhe madhësitë e bllokut të specifikuara në të hyjnë në fuqi.
Elementet e pozicionuar absolutisht nuk kanë margjina të shembur
Si parazgjedhje, kur preken dy margjina vertikale, ato bashkohen në një të barabartë me maksimumin e tyre. Kjo quhet marzhe kolapsuese.
Elementet e pozicionuar absolutisht sillen në mënyrë të ngjashme me elementët lundrues - mbushja e tyre nuk bashkohet me ato ngjitur.
Në këtë demonstrim, elementi vendoset në një dhëmbje prej 20 pikselësh. Dhimbja e saj shembet e dhëmbëzuar elementi prind, gjithashtu e barabartë me 20 piksele. Siç mund ta shihni, vetëm me pozicionim absolut, nuk ndodh kolaps.
Por si mund ta parandalojmë kolapsin e mbushjes? Ne duhet të vendosim një lloj ndarës midis tyre.
Kjo mund të jetë mbushje ose kufi dhe mund të zbatohet si për elementët prind ashtu edhe për fëmijën. Një opsion tjetër është të shtoni një fiksim të qartë në elementin prind.
Pozicionimi i elementeve me piksel dhe përqindje
A keni përdorur ndonjëherë përqindje në vend të pikselëve për të pozicionuar elementë? Nëse përgjigja është po, atëherë ju e dini se zhvendosja e elementit varet nga njësitë e zgjedhura të matjes (pikselë ose përqindje).
Kjo është pak e turpshme, apo jo? Pra, së pari, le të shohim se çfarë thotë specifikimi për kompensimin si përqindje:
Kompensimi si përqindje e gjerësisë (për majtas dhe djathtas) ose lartësisë (lart ose poshtë) të kutisë mëmë. Për elementët e ngjitur, kompensimi llogaritet si përqindje e gjerësisë (për majtas dhe djathtas) ose lartësisë (sipër ose poshtë) të rrjedhës. E lejueshme vlerat negative.
Siç u përmend, kur specifikoni një kompensim si përqindje, pozicioni i një elementi varet nga gjerësia dhe lartësia e prindit të tij.
Demoja tregon këtë ndryshim:
Ky shembull përdor pikselë dhe përqindje për kompensim. Sigurisht, kur vendosni kompensimin në piksel, elementi zhvendoset aty ku duhet.
Dhe nëse zgjedhim një përqindje për kompensimin, rezultati do të varet nga madhësia e elementit mëmë. Këtu është një vizualizim që tregon se si llogaritet pozicioni i ri:
Shënim: siç ndoshta e dini, transformimin e pronës(së bashku me funksione të ndryshme translate) gjithashtu ju lejon të ndryshoni pozicionin e një elementi. Por në këtë rast, kur përdoren përqindjet, llogaritja do të bazohet në madhësinë e vetë elementit, dhe jo në prindin e tij.
konkluzioni
Shpresoj se ky artikull ju ka ndihmuar të kuptoni më mirë pozicionimin e CSS dhe të sqaroni kompleksitetin themelor.
Dy mjete kryesore përdoren shpesh për paraqitjen e faqes - pozicionimi dhe lëvizje e lirë (lundruese)... Pozicionimi i CSS ju lejon të specifikoni se ku shfaqet kutia e një elementi dhe lëvizja e lirë i lëviz elementët në skajin e majtë ose të djathtë të kutisë së kontejnerit, duke lejuar që pjesa tjetër e përmbajtjes të "mbështillet" rreth tij.
Pozicionimi dhe lëvizja e lirë e elementeve
1. Llojet e pozicionimit
Vetia e pozicionit ju lejon të vendosni saktësisht pozicionin e ri të kutisë në lidhje me vendin ku do të ishte në rrjedhën normale të dokumentit. Si parazgjedhje, të gjithë elementët janë renditur në mënyrë sekuenciale njëri pas tjetrit në rendin në të cilin janë përcaktuar në strukturën e dokumentit HTML. Prona nuk është e trashëguar.
pozicion
Kuptimi:
statike	Vlera e paracaktuar nënkupton mungesë pozicionimi. Elementet shfaqen në mënyrë sekuenciale njëri pas tjetrit në rendin në të cilin janë përcaktuar në dokumentin HTML. Përdoret për të pastruar çdo vlerë tjetër pozicionimi.
i afërm	Elementi i pozicionuar relativisht zhvendoset nga pozicioni i tij normal në drejtime të ndryshme në lidhje me kufijtë e kontejnerit mëmë, dhe hapësira që ajo zinte nuk zhduket. Megjithatë, një element i tillë mund të mbivendoset me përmbajtje të tjera në faqe. Nëse për një element të pozicionuar relativisht ju vendosni njëkohësisht vetitë e sipërme dhe të poshtme ose majtas dhe djathtas, atëherë në rastin e parë do të funksionojë vetëm lart, në të dytën - majtas. Pozicionimi relativ ju lejon të vendosni indeksin z për një element, si dhe të vendosni absolutisht fëmijët brenda një blloku.
absolute	Një element i pozicionuar absolutisht hiqet plotësisht nga rrjedha e dokumentit dhe pozicionohet në lidhje me kufijtë e bllokut të tij të kontejnerit (një element tjetër ose dritarja e shfletuesit). Kontejneri i bllokut për një element absolutisht të pozicionuar është elementi mëmë i afërt, vlera e vetive të pozicionit të të cilit nuk është statike. Vendndodhja e skajeve të një elementi përcaktohet duke përdorur vetitë e kompensimit. Hapësira që ka zënë një element i tillë shembet sikur elementi të mos ekzistonte në faqe. Një element absolutisht i pozicionuar mund të mbivendoset ose të mbivendoset nga elementë të tjerë (përmes vetive z-index). Çdo element i pozicionuar absolutisht gjeneron një bllok, domethënë, merr shfaqjen e vlerës: bllok; ...
fikse	Kyç elementin në vendndodhjen e specifikuar faqet. Bllok-kontejneri i një elementi fiks është porta e shikimit, domethënë, elementi është gjithmonë i fiksuar në lidhje me dritaren e shfletuesit dhe nuk e ndryshon pozicionin e tij kur faqja lëviz. Vetë elementi hiqet plotësisht nga rrjedha kryesore e dokumentit dhe krijohet në një rrjedhë të re dokumenti.
fillestare	Vendos vlerën e pronës në vlerën e saj të paracaktuar.
trashëgojnë	Trashëgon vlerën e vetive nga elementi mëmë.

Oriz. 1. Dallimi ndërmjet pozicionimit statik, relativ dhe absolut
2. Vetitë e kompensimit
Vetitë përshkruajnë kompensimin në lidhje me anën më të afërt të bllokut të kontejnerit. Set për elementet për të cilët vlera e vetive të pozicionit nuk është statike. Ata mund të marrin vlera pozitive dhe negative. E pa trashëguar.
Për vetinë e sipërme, vlerat pozitive lëvizin skajin e sipërm të elementit të pozicionuar më poshtë dhe vlerat negative lëvizin mbi skajin e sipërm të bllokut të tij të kontejnerit. Për vetinë e majtë, vlerat pozitive lëvizin skajin e elementit të pozicionuar në të djathtë, dhe vlerat negative lëvizin skajin e elementit të pozicionuar në të majtë. Kjo do të thotë, vlerat pozitive lëvizin elementin brenda bllokut të kontejnerit, ndërsa vlerat negative e lëvizin elementin jashtë tij.
3. Pozicionimi brenda një elementi
Për një bllok kontejner të një elementi absolutisht të pozicionuar, vetia e pozicionit: relative vendoset pa kompensime. Kjo lejon që elementët të vendosen brenda një elementi kontejner.
.mbështjellje (mbushje: 10px; lartësia: 150px; pozicioni: relative; sfondi: # e7e6d4; rreshtimi i tekstit: djathtas; kufiri: 3px i ndërprerë # 645a4e;) .bardhë (pozicioni: absolute; gjerësia: 200 px; sipër: 10px; majtas : 10 pikselë; mbushje: 10 px; sfond: #ffffff; kufiri: 3 px i ndërprerë # 312a22;)
Oriz. 2. Pozicionimi relativ absolut
4. Problemet e pozicionimit
1. Nëse caktohet gjerësia ose lartësia e një elementi të pozicionuar absolutisht vlera automatike, atëherë vlera e tij do të përcaktohet nga gjerësia ose lartësia e përmbajtjes së elementit. Nëse gjerësia ose lartësia deklarohen në mënyrë eksplicite, atëherë kjo vlerë do të caktohet.
2. Nëse brenda bllokut me pozicion: absolut ka elemente për të cilat mbështjellës notues, atëherë lartësia e këtij elementi do të jetë e barabartë me lartësinë e më të gjatit prej këtyre elementeve.
3. Për një element me pozicion: absolut ose pozicion: fiks, nuk mund të vendosni njëkohësisht veçorinë float, por për një element me pozicion: relative, mundeni.
4. Nëse paraardhësi i elementit të pozicionuar është një element blloku, atëherë blloku-kontejneri formohet nga zona e përmbajtjes, e kufizuar me kufirin (kufirin). Nëse prindi është një element inline, kontejneri i bllokut formohet nga kufiri i jashtëm i përmbajtjes së tij. Nëse nuk ka prind, elementi i trupit është blloku i kontejnerit.
5. Lëvizja e lirë e elementeve
Në mënyrë normale, elementët e bllokut shfaqen duke filluar në krye të dritares së shfletuesit drejt fundit. Vetia float lejon çdo element të notojë duke e rreshtuar atë majtas ose djathtas të faqes së internetit ose elementit të kontejnerit që përmban. Në këtë rast, pjesa tjetër e elementeve të bllokut do ta injorojë atë, dhe elemente inline do të lëvizë djathtas ose majtas, duke liruar hapësirë ​​për të dhe duke rrjedhur rreth tij.
Oriz. 3. Lëvizja e lirë elementet
Një kuti lundruese ndryshon përmasat e përmbajtjes së saj me mbushje dhe kufij. Kufijtë e sipërm dhe të poshtëm të elementeve lundrues nuk shemben. Vetia float zbatohet si për elementët e bllokut ashtu edhe për elementët inline.
Skaji i jashtëm i majtë ose i djathtë i një elementi të lundruar, ndryshe nga elementët e pozicionuar, nuk mund të vendoset në të majtë (ose djathtas) të skajit të brendshëm të bllokut të tij të kontejnerit, d.m.th. shkojnë përtej kufijve të saj. Në këtë rast, nëse kufijtë e brendshëm janë caktuar për bllokun e kontejnerit, atëherë blloku lundrues do të jetë i ndarë nga buza e bllokut të kontejnerit sipas distancës së specifikuar.
Vetia ndryshon automatikisht vlerën e llogaritur (të dukshme nga shfletuesi) e veçorisë së ekranit për t'u shfaqur: bllok për vlerat e mëposhtme: inline, blloku inline, rreshti-tabelë, grupi-rresht-tabela, grupi-tabela-kolona, ​​grupi-tabela-kolona , qeliza e tabelës, titulli i tabelës, grupi i kokës së tabelës, grupi i bazës së tabelës. Vlera e tabelës inline ndryshon në tabelë.
Vetia nuk ka asnjë efekt në artikujt me ekran: flex dhe ekran: inline-flex.
Kur përdorni veçorinë float për elementët e bllokut, sigurohuni që të vendosni gjerësinë. Duke bërë këtë, shfletuesi do të krijojë hapësirë ​​për përmbajtje të tjera. Por nëse gjerësia e kombinuar e të gjitha kolonave është më e madhe se hapësira e disponueshme, atëherë elementi i fundit do të zbresë.
ku mbushje vertikale Kufijtë e elementeve të lundruar nuk shemben me mbushjen e elementeve ngjitur, ndryshe nga elementët e rregullt të bllokut.
6. Anuloni elementet e mbështjelljes
6.1. Pastro pronë
Vetia e qartë përcakton se si do të pozicionohet elementi që pason elementin e lundruar. Vetia anulon mbështjelljen në njërën ose të dyja anët e elementit të vendosur pronë notuese... Për të parandaluar shfaqjen e sfondit ose kufijve nën elementët lundrues, përdorni rregullin (mbushje: i fshehur;).
6.2. Pastrimi i një transmetimi me stile duke përdorur klasën clearfix dhe: pas pseudo-klasës
Supozoni se keni një kuti enë që nuk ka gjerësi ose lartësi. Brenda tij vendoset një bllok lundrues me dimensione të specifikuara.
.container (mbushje: 20 px; sfond: # e7e6d4; kufi: 3 px me pika # 645a4e;) .floatbox (float: majtas; gjerësia: 300 px; lartësia: 150 px; margjina-djathtas: 20 px; mbushja: 0: 20pxffff sfond; ; kufiri: 3 px me pika # 666666;) Oriz. 4. “Efekti i rrëzimit” të bllokut të kontejnerit
Zgjidhja:
Ne krijojmë klasën .clearfix dhe, e kombinuar me: pas pseudo-klasës, e aplikojmë atë në bllokun e kontejnerit.
.container (mbushje: 20 px; sfond: # e7e6d4; kufi: 3 px me pika # 645a4e;) .floatbox (float: majtas; gjerësia: 300 px; lartësia: 150 px; margjina-djathtas: 20 px; mbushja: 0: 20pxffff sfond; ; kufiri: 3 pikselë me ndërprerje # 666666;) .e qartë: pas (përmbajtja: ""; shfaqja: bllok; lartësia: 0; e qartë: të dyja; dukshmëria: e fshehur;)
Opsioni i dytë për pastrimin e rrjedhës:
Clearfix: after (përmbajtja: ""; shfaqja: tabela; pastroj: të dyja;)
Oriz. 5. Zbatimi i një metode "pastrimi" në një bllok kontejneri që përmban një element lundrues
6.3. Një mënyrë e thjeshtë për të pastruar një rrymë
Ekziston një teknikë tjetër për pastrimin e rrjedhës për një element që përmban elementë lundrues, për shembull, për një listë horizontale të parregulluar:
Ul (diferencë: 0; stili i listës: asnjë; mbushja: 20 px; sfondi: # e7e6d4; tejmbushja: automatik;) li (lundrues: majtas; gjerësia: llogaritur (100% / 3 - 20 px); lartësia: 50 px; margjina- djathtas: 20 px; sfondi: #ffffff; kufiri: 3 px i ndërprerë # 666666;) li: fëmija i fundit (margin-djathtas: 0;) Fig. 6. Pastrimi i rrjedhës së listës horizontale