Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ
  • në shtëpi
  • Programet
  • Si të lëvizni elementët në css. Elementet inline të pozicionuar absolutisht bëhen në nivel blloku

Si të lëvizni elementët në css. Elementet inline të pozicionuar absolutisht bëhen në nivel blloku

Në HTML, të gjithë elementët mund të ndahen në bllok dhe inline. Elementet e bllokut zakonisht përfaqësohen si zona drejtkëndore me disa informacione. Me ndihmën e tyre ndërtohet rrjeti i faqeve. Elementë të tillë zënë të gjithë hapësirën e disponueshme për ta në gjerësi, dhe zakonisht ka një ndërprerje të vijës para dhe pas tyre. Blloqet mund të vendosen në dhëmbëza, dimensione horizontale dhe vertikale.

Karakteristikat e elementeve të bllokut

Etiketat e bllokimit përfshijnë etiketa që nënvizojnë një sasi të madhe informacioni teksti:

,
,

,

,

,
    ... 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, mbështillen në një rresht të ri dhe renditen 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%". Elementet e pozicionuar absolutisht mund të kategorizohen në një lloj të ri sepse ndaj tyre 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 zë hapësirë ​​në lidhje me një sistem koordinativ specifik të lidhur me dimensionet 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ë vendet e tyre origjinale.

    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.

    18.02.15 21.4K

    Nëse preni ndonjë faqe interneti të bazuar në html, atëherë do të shihni një strukturë të caktuar shtresë pas shtrese. Për më tepër, në pamjen e saj, do të jetë e ngjashme me një pastë sfumuar. Nëse mendoni kështu, atëherë ka shumë të ngjarë që nuk keni ngrënë për një kohë të gjatë. Pra, së pari ushqeni urinë tuaj, dhe më pas ne do t'ju tregojmë se si ta përqendroni shtresën e div në faqen tuaj:

    Përfitimet e etiketimit

    Ekzistojnë dy lloje kryesore të ndërtimit të një strukture siti:

    • Tabela;
    • E bllokuar.

    Paraqitja e tabelave ka qenë mbizotëruese që nga fillimi i internetit. Përparësitë e tij përfshijnë saktësinë e pozicionimit të specifikuar. Por, megjithatë, ajo ka disavantazhe të dukshme. Ato kryesore janë vëllimi i kodit dhe shpejtësia e ulët e shkarkimit.

    Kur përdorni një plan urbanistik, faqja e internetit nuk do të shfaqet derisa të ngarkohet plotësisht. Ndërsa kur përdoren blloqe div, elementet shfaqen menjëherë.

    Përveç shpejtësisë së lartë të ngarkimit, ndërtimi i bazuar në bllok i faqes lejon disa herë uljen e sasisë së kodit html. Duke përfshirë përdorimin e klasave CSS.

    Megjithatë, paraqitja tabelare duhet të përdoret për të strukturuar shfaqjen e të dhënave në një faqe. Një shembull klasik i përdorimit të tij është shfaqja e tabelave.

    Blloko ndërtimin e bazuar në etiketa

    quhen gjithashtu shtresa-për-shtresë, dhe vetë blloqet janë shtresa. Kjo ndodh sepse kur përdoren vlera të caktuara të vetive, ato mund të vendosen njëra mbi tjetrën, si shtresat në Photoshop.

    Ndihma për pozicionim

    Në paraqitjen e bllokut, pozicionimi i shtresave bëhet më së miri duke përdorur fletë stili kaskadë. Prona kryesore CSS përgjegjëse për pozicionimin

    , është një noton.
    Sintaksa e vetive:
    noton: majtas | drejtë | asnjë | trashëgojnë,
    Ku:

    • majtas - rreshton elementin në të majtë të ekranit. Rrjedha rreth pjesës tjetër të elementeve ndodh në të djathtë;
    • djathtas - shtrirja në të djathtë, rrjedhja rreth elementëve të tjerë - në të majtë;
    • asnjë - nuk lejohet mbështjellje;
    • trashëgojnë - trashëgojnë vlerën e elementit mëmë.

    Le të shohim një shembull të lehtë të pozicionimit të div-ve duke përdorur këtë pronë:

    Blloku i majtë


    Tani le të përpiqemi të përdorim të njëjtën veti për të vendosur ndarjen e tretë në qendër të faqes. Por për fat të keq float nuk ka vlerë qendrore. Dhe kur vendosni një bllok të ri në vlerën e shtrirjes djathtas ose majtas, ai zhvendoset në drejtimin e specifikuar. Prandaj, mbetet vetëm për të vendosur float: lënë në të tre blloqet:


    Por as ky nuk është alternativa më e mirë. Kur dritarja zvogëlohet, të gjitha shtresat vendosen në një rresht vertikalisht, dhe kur rritet madhësia, ato ngjiten në skajin e majtë të dritares. Prandaj, nevojitet një mënyrë më e mirë për të përafruar div në qendër.

    Shtresat e qendrës

    Në shembullin tjetër, ne do të përdorim një shtresë kontejneri në të cilën do të vendosim pjesën tjetër të elementeve. Kjo zgjidh problemin e zhvendosjes së blloqeve në lidhje me njëri-tjetrin kur dritarja ndryshohet. Përqendrimi i kontejnerit në mes bëhet duke vendosur vetitë e marzhit në zero për margjinën e sipërme dhe automatike në anët (diferenca: 0 auto):

    Blloku i majtë

    Blloku qendror


    I njëjti shembull tregon se si mund të përqendroni një div horizontalisht. Dhe nëse modifikoni pak kodin e mësipërm, mund të arrini shtrirjen vertikale të blloqeve. Për ta bërë këtë, ju vetëm duhet të ndryshoni gjatësinë e shtresës së enës (zvogëloni atë). Kjo do të thotë, pas redaktimit të css-së, klasa duhet të duket kështu:

    Pas ndryshimit, të gjitha blloqet do të rreshtohen rreptësisht në një rresht në mes. Dhe pozicioni i tyre nuk do të ndryshojë në asnjë madhësi të dritares së shfletuesit. Kështu duket përqendrimi vertikal i div:


    Në shembullin e mëposhtëm, ne përdorëm një numër të vetive të reja css për të përqendruar shtresat brenda kontejnerit:


    Një përshkrim i shkurtër i vetive css dhe vlerave të tyre që kemi përdorur në këtë shembull për të përqendruar div brenda div:
    • Display: inline-block - Rreshton një element blloku me një linjë dhe siguron që ai të jetë i mbështjellë rreth një elementi tjetër.
    • vertikal-align: mesme - rreshton elementin në mes në lidhje me prindin;
    • margin-left - vendos margjinën në të majtë.

    Si të krijoni një lidhje nga një shtresë

    Mjaft e çuditshme tingëllon, por kjo është e mundur. Ndonjëherë mund të nevojitet një bllok div si lidhje kur shtroni lloje të ndryshme menysh. Le të shohim një shembull praktik të zbatimit të një shtrese lidhjeje:

    Lidhje me faqen tonë


    Në këtë shembull, duke përdorur ekranin e linjës: bllok, vendosim lidhjen me vlerën e elementit të bllokut. Dhe për ta bërë lidhjen të gjithë lartësinë e bllokut div, vendosni lartësinë: 100%.

    Fshehja dhe shfaqja e elementeve të bllokut

    Elementet e bllokut ofrojnë më shumë opsione për zgjerimin e funksionalitetit të ndërfaqes sesa paraqitja e vjetër e tabelës. Shpesh ndodh që dizajni i një faqe interneti të jetë unik dhe i dallueshëm. Por për një ekskluzivitet të tillë duhet të paguani me mungesë hapësire të lirë.

    Kjo është veçanërisht e vërtetë për faqen kryesore, e cila ka koston më të lartë të vendosjes së reklamave. Prandaj, ka një problem se ku të "shtyhet" një tjetër baner reklamues. Përafrimi i div në qendër të faqes nuk mjafton!

    Një zgjidhje më racionale është krijimi i një blloku të fshehur. Këtu është një shembull i thjeshtë i një zbatimi të tillë:

    Ky është një buton magjik. Duke klikuar mbi të do të fshihet ose shfaqet blloku i fshehjes.

    Nga autori: pershendetje. Pozicionimi i elementeve css është një temë shumë e rëndësishme në ndërtimin e faqes. Në këtë artikull, unë propozoj ta konsideroni atë në mënyrë më të detajuar, të gjitha mënyrat për të lëvizur blloqet nëpër faqen e internetit.

    Cilat janë llojet

    Nëse flasim për pozicionimin e elementeve të bllokut, atëherë ai vendoset duke përdorur vetinë e pozicionit. Ka katër kuptime dhe secila meriton një konsideratë të veçantë.

    Pozicionimi absolut

    Kjo është specia e parë e njohur. Është vendosur kështu: pozicioni: absolut. Pas kësaj, blloku humbet vetitë e tij të zakonshme dhe del plotësisht nga rrjedha normale. Çfarë është kjo rrymë? Mundohuni të vendosni disa elementë blloku në një rresht në shënim. Si do të bëhen? Njëra pas tjetrës, dhe jo ndryshe.

    Kjo është sjellja normale e paracaktuar e blloqeve. Por çfarë ndodh me një bllok që ka pozicionim absolut të përcaktuar? Ai del plotësisht nga rrjedha normale, blloqet e tjera thjesht nuk e vënë re atë, sikur të mos ekzistonte kurrë, por elementi mbetet në faqe. Pozicionimi absolut në css përdoret shpesh për vendosjen e saktë të elementeve dekorative, ikonave dhe gjërave të tjera të dizajnit.

    Tani mund të zhvendoset duke përdorur veçoritë majtas, djathtas, lart dhe poshtë. Si parazgjedhje, lëvizja ndodh në lidhje me skajet e dritares së shfletuesit, por nëse elementi prind ka pozicion: relative, atëherë zhvendosja ndodh në lidhje me bllokun prind.

    Blloku (pozicioni: absolut; poshtë: 0; djathtas: 0;)

    Blloko (

    pozicioni: absolut;

    fund: 0;

    djathtas: 0;

    Elementi do të zhvendoset në këndin e poshtëm të djathtë. Vërej se butoni i sipërm shpesh bëhet në këtë mënyrë - ata thjesht e vendosin atë absolutisht në cep. Këtu është një shembull tjetër, në të cilin unë ju tregoj fillimisht shënimin e mundshëm:

    < div id = "wrapper" >

    < div class = "block" > < / div >

    < / div >

    Dhe tani stilet css për këtë fragment:

    #wrapper (pozicioni: relative;) .blloku (pozicioni: absolut; lart: 0; djathtas: 10 px;)

    #mbështjellës (

    pozicioni: i afërm;

    Blloko (

    pozicioni: absolut;

    krye: 0;

    djathtas: 10px;

    Në këtë shembull, ne fillimisht shënuam pozicionimin relativ në kontejnerin prind (relativ - për këtë më vonë në artikull), dhe më pas vendosëm pozicionimin absolut për të njëjtin element .block. Si rezultat, koordinatat do të numërohen jo nga vetë dritarja e shfletuesit, por nga skajet e elementit prind, domethënë blloku i mbështjellësit.

    Pozicionimi relativ i elementeve css

    Kjo është pamja e mëposhtme dhe shkruhet kështu - pozicioni: relative. Koordinatat vendosen me të njëjtat veti si për pozicionin absolut. Dallimi i vetëm domethënës është se elementi nuk bie zyrtarisht nga rrjedha - ka vend për të.

    Kjo vlerë funksionon si dukshmëria: e fshehur, kur elementi është i fshehur nga faqja, por hapësira nën të mbetet e paprekur. E njëjta gjë ndodh me vendosjen relative - blloku mund të zhvendoset kudo, por hapësira për të mbetet bosh dhe pjesët e tjera nuk do ta marrin atë.

    Është gjithashtu e rëndësishme të dini se kompensimi nuk ndodh nga skajet e dritares së shfletuesit të internetit, por nga vendi ku blloku ishte fillimisht. Kjo eshte:

    Blloku (pozicioni: relative; lart: 10 px; djathtas: 50 px;)

    Blloko (

    pozicioni: i afërm;

    sipër: 10px;

    djathtas: 50 px;

    Blloku do të lëvizë 50 pikselë në të djathtë dhe 10 pikselë në të majtë.

    Fiksimi

    Me siguri në internet, ju keni parë më shumë se një herë në faqet kur, kur lëvizni, ndonjë baner nuk u zhduk, por vazhdoi të ishte në zonën tuaj të dukshmërisë, sikur të qëndronte në një vend. Kjo bëhet kryesisht duke përdorur pozicionimin fiks. Për ta bërë këtë, duhet të shkruani:

    Pozicioni: pozicion statik ose normal statik

    Lloji i fundit është statik, kjo është sjellja e zakonshme e elementeve të bllokut. Nuk ka nevojë të shkruhet, sepse është si parazgjedhje, por prapë duhet të dini për vlerën e katërt. Ndonjëherë shkruhet me pozicion: statik për të anuluar një lloj tjetër pozicionimi në ngjarje të caktuara në faqen e internetit.

    Si t'i pozicionoj saktë blloqet në css?

    Ne i kemi shqyrtuar kuptimet, por kjo nuk mjafton për ta mbyllur këtë temë për vete. Në fakt, ju duhet të kuptoni se ku dhe cilat lloje të pozicionimit duhet të aplikohen. Unë tashmë ju dhashë një shembull me një fiks - mund ta përdorni për të krijuar shirita anësor ngjitës, koka ose funde.

    Pozicionimi relativ mund të ndihmojë kur ju duhet të lëvizni një bllok pak në lidhje me pozicionin e tij dhe ta mbani atë në rrjedhë. Është vendosur gjithashtu në blloqe prindërore për të përdorur lëvizjen absolute për fëmijët.

    Truke të tjera: qendërzim, blloqe lundruese

    Vetia e pozicionit nuk i zgjidh të gjitha problemet me rregullimin e elementeve të bllokut. Si do të krijonit, për shembull, një rrjet faqesh duke përdorur atë? Nuk kam ide të mira. Këtu vijnë në ndihmë prona të tjera.

    Rrjetet shpesh bëhen duke përdorur notues në css. Vetia ju lejon të shtyni bllokun në skajin e majtë ose të djathtë të prindit (float: majtas, float: djathtas), duke lejuar që disa elementë të bllokut të bëhen në një rresht, gjë që është e zakonshme në çdo vend.

    Përqendrimi bëhet kështu: blloku duhet të shkruajë një gjerësi të caktuar dhe më pas të vendosë margjinën e vetive: 0 në auto. Është vlera automatike që do ta rreshtojë atë horizontalisht saktësisht në qendër. Natyrisht, për këtë duhet të jetë i vetmi në linjën e tij, përndryshe asgjë nuk do të funksionojë.

    Të gjitha llojet e pozicionimeve të listuara në këtë artikull mund të jenë të dobishme për një zhvillues ueb. Diku duhet të futet ikona (pozicioni: absolute), diku, pozicioni i bllokut duhet të rregullohet pak, duke lënë një vend pas tij (pozicioni: relative) dhe ku duhet të fiksohet widget (pozicioni: fiks). Në përgjithësi, njohja e kësaj prone definitivisht nuk do të jetë e tepërt.

    Epo, për të mësuar edhe më shumë nga bota e ndërtimit të faqeve, sigurohuni që të abonoheni në blogun tonë dhe të merrni materiale të reja trajnimi. Dhe gjithashtu ju këshilloj t'i hidhni një sy tonës, ku ngrihet edhe një temë e ngjashme. (pozicionimi i artikullit)

    Pronës pozicion ka kuptimet e mëposhtme
    statike i afërm absolute fikse
    Vetitë aplikohen vetëm në lidhje me të (përveç pozicionit: statik;)
    krye fund drejtë majtas
    Mund të jetë i pranishëm në të njëjtën kohë
    diferencë transformoj noton (përjashtuar pozicionin: absolut; dhe pozicionin: fiks;)

    Shtoni një etiketë bosh përpara div me class = "primer" -.

    Prezantimi

    Elementet në një faqe interneti zënë pak hapësirë. Për analogji me anijet në lojën "Beteja e Detit". Duhet të ketë kuti boshe midis anijeve - kufijtë.

    Për të vendosur një element mbi një tjetër, duhet të vendosni një vlerë negative për marzhin. Por atëherë përmbajtja e etiketave do të mbivendoset. Me ndihmën e vetive të pozicionit dhe ato ngrihen disi në nivelin 2.

    Në mënyrë natyrale, etiketat e poshtme tregohen mbi etiketat e sipërme në kod. Falë indeksit z në nivelin 2, ju mund ta përcaktoni vetë elementin e dukshëm.


    Pozicionimi statik - pozicioni: statik;

    pozicioni: statik është parazgjedhja dhe anashkalon relative, absolute dhe fikse. Vlerat e vetive të sipërme, të poshtme, djathtas, majtas nuk merren parasysh. Në mungesë të transformimit, indeksi z injorohet.

    A
    B
    V

    Pozicionimi relativ - pozicioni: relativ;

    Bllokut që i caktojmë pozicionit: relative do t'i jepet përparësi. Përmbajtja e elementit të poshtëm është e fshehur.

    A
    B
    V

    Për të vendosur bllokun B mbi C, por poshtë A, nuk mjafton të caktoni pozicionin: në lidhje me të, sepse në kod është poshtë bllokut A, që do të thotë se do ta mbivendoset.

    A
    B
    V

    Është gjithashtu e nevojshme të vendosni indeksin z për elementin B dhe më pak se ai i bllokut A.

    A
    B
    V

    Në vend të diferencës gjatë pozicionimit relativ, ndonjëherë është më mirë të përdoren vetitë e sipërme, të poshtme, djathtas, majtas. Pika fillestare për ta është pozicioni fillestar i elementit. Në të njëjtën kohë, blloku B vazhdon të jetë i vendosur sikur blloku A të jetë në të njëjtin vend - ai lë hapësirë ​​boshe për të. Prandaj, nuk keni nevojë të krijoni një div bosh ().

    A
    B
    V

    Analogji e plotë me pronën

    A
    B
    V

    Për elementët inline

    Elementet inline nuk kompensohen lart e poshtë (). Vetëm lart, poshtë

    BAB
    ose
    BAB

    B a b

    Pozicionimi absolut dhe fiks

    Duket se blloku me pozicionin: absolute duhet të jetë më i lartë se pozicioni: relativ, por nuk është kështu, këtu zbatohet rendi natyror. Kjo do të thotë se z-index do t'ju lejojë të zgjidhni elementin prioritar midis tyre.

    A
    B
    V

    Blloku C injoron pozicionin origjinal të bllokut B, sepse me pozicionin: absolut dhe pozicionin: fiks, elementi pushon së ndikuari në etiketat ngjitur qoftë përmes gjerësisë / lartësisë së tij, ose përmes float: majtas.

    A
    B
    V

    Tabela përmbledhëse

    vetitë dalluese pozicioni: statik; pozicioni: i afërm;
    transformoj: përkthe ();
    pozicioni: absolut; pozicioni: fiks;
    mbivendosje është më mirë të mos vendosni elementë njëri mbi tjetrin elementet kanë përparësi ndaj statikes. Vlerat e tjera janë të njëjta. I dukshëm do të jetë ai që është më poshtë në kod, ose ka një z-indeks të madh
    pikë referimi lart, djathtas, poshtë dhe majtas injoruar pozicioni origjinal i elementitskaji i elementit mëmëskaji i dritares së shfletuesit
    elementet përreth merrni parasysh pozicionin aktual të elementitmerrni parasysh pozicionin origjinal të elementit injoroni pozicionin e elementit
    gjerësia: 100%; kjo është gjerësia element (për inline) / element prind (për bllok)elementi mëmë me pozicion jo në vlerë statike dritaret e shfletuesit
    kur lëvizni elementin e faqeslëviz "ngjitet" në vendndodhjen e specifikuar të dritares së shfletuesit

    Dhe tani, për të konsoliduar materialin, klikoni në butonat në fillim të artikullit, mendoni pse kanë ndodhur ndryshime të tilla.

    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ë një histori të gjatë (floats), të tjerat (flexbox) kanë fituar popullaritet 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ë shqyrtojmë shkurtimisht bazat e llojeve të ndryshme të pozicionimit.

    Pasqyrë e metodave të disponueshme të pozicionimit

    Vetia CSS e pozicionit përcakton llojin e pozicionimit të një elementi.

    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 për këto veti është fjala 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 ndryshimet themelore midis llojeve të pozicionimit të disponueshëm:

    • 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 tregohet nga shembulli i 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 elementë të ndryshëm për të notuar 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.

    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. Mbushja e tij shembet me mbushjen e elementit prind, i cili është gjithashtu 20 piksel. 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. Vlerat negative janë të lejuara.

    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, vetia e transformimit (së bashku me funksione të ndryshme të përkthimit) ju lejon gjithashtu 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.

    Artikujt kryesorë të lidhur