Nga autori: pershendetje. Pozicionimi i elementeve css është një temë shumë e rëndësishme në ndërtimin e faqes në internet. 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 një faqe në internet.
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 shqyrtim 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 bie plotësisht jashtë rrjedhës normale. Çfarë është kjo rrymë? Përpiquni të vendosni disa elementë të nivelit të bllokut në një rresht në markup. Si do të bëhen? Njëra pas tjetrës dhe asgjë tjetër.
Kjo është sjellja normale e blloqeve si parazgjedhje. Por çfarë ndodh me një bllok që ka pozicionim absolut të përcaktuar? Ai bie plotësisht jashtë rrjedhës 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 të pozicionuar me saktësi elementet dekorative, ikonat dhe gjëra të tjera të mira.
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 është vendosur në pozicionin: 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 shpesh kështu e bëjnë butonin e sipërm - ata thjesht e vendosin atë absolutisht në cep. Dhe këtu është një shembull tjetër ku unë do të 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; ) .block (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 regjistruam pozicionimin relativ të kontejnerit prind (relativ - më shumë për këtë më vonë në artikull), dhe më pas vendosëm pozicionin 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 tjetër dhe shkruhet kështu - pozicioni: relative. Koordinatat përcaktohen nga të njëjtat veti si në pozicionin absolut. Dallimi i vetëm domethënës është se elementi nuk bie zyrtarisht nga rrjedha - ka vend për të.
Funksionimi i kësaj vlere mund të krahasohet me dukshmërinë: i fshehur, kur elementi është i fshehur nga faqja, por vendi nën të mbetet i paprekur. E njëjta gjë ndodh me vendosjen relative - blloku mund të zhvendoset kudo, por vendi nën të mbetet i zbrazët dhe nuk do të zërë pjesë të tjera.
Është gjithashtu e rëndësishme të dini se kompensimi nuk vjen nga skajet e dritares së shfletuesit të internetit, por nga vendi ku fillimisht qëndronte blloku. Dmth:
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 keni parë më shumë se një herë në faqet kur, kur lëvizni, një baner nuk u zhduk, por vazhdoi të ishte në zonën tuaj të dukshmërisë, sikur të qëndronte në një vend. Kjo zbatohet kryesisht duke përdorur pozicionimin fiks. Për ta bërë këtë, duhet të shkruani:
Pozicioni: pozicion statik ose i rregullt statik
Pamja e fundit është statike, që është sjellja normale e elementeve të nivelit të bllokut. Nuk ka nevojë të shkruhet, sepse është parazgjedhja, por duhet të dini ende për vlerën e katërt. Ndonjëherë pozicioni: static shkruhet për të anashkaluar një lloj tjetër pozicionimi në ngjarje të caktuara në faqen e internetit.
Si ta bëjmë të saktë pozicionimin e bllokut 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 pozicionesh duhet të aplikoni. Me fiks, unë tashmë ju dhashë një shembull - mund të përdoret për të krijuar shirita anësor ngjitës, kokë ose funde.
Pozicionimi relativ është i dobishëm kur ju duhet të lëvizni një bllok paksa në lidhje me pozicionin e tij dhe ta mbani atë në rrjedhë. Është vendosur gjithashtu në blloqet prindërore për të përdorur lëvizjen absolute për elementët fëmijë.
Teknika të tjera: qendërzim, blloqe lundruese
Vetia e pozicionit nuk i zgjidh të gjitha problemet me vendosjen e elementeve të bllokut. Si do të krijonit, për shembull, një rrjet faqesh me të? Nuk kam ide të mira. Këtu janë të dobishme veçoritë e tjera.
Me ndihmën e float në css, shpesh bëhen rrjete. 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ë ndodh shumë shpesh 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: 0 veti automatike. Është vlera automatike që do ta rreshtojë atë horizontalisht pikërisht 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, korrigjoni pak pozicionin e bllokut, duke lënë një vend pas tij (pozicioni: relative) dhe ku duhet të fiksohet miniaplikacioni (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 arsimore. Dhe ju këshilloj të shikoni edhe tonën, ku ngrihet edhe një temë e ngjashme. (elementet e pozicionimit)
Vlad Merzheviç
Pozicionimi është pozicioni i një elementi në një sistem koordinativ. Ekzistojnë katër lloje të pozicionimit: normal, absolut, fiks dhe relativ. Në varësi të llojit, i cili vendoset përmes vetive pozicioni, ndryshon edhe sistemi i koordinatave.
Falë kombinimit të vetive të pozicionit, majtas, sipër, djathtas dhe poshtë, një element mund të vendoset mbi njëri-tjetrin, të jepet në një pikë me koordinata të caktuara, të fiksuara në një vend të caktuar, të përcaktojë pozicionin e një elementi relativ. në një tjetër dhe më shumë.Si vetitë e tjera CSS, kontrolli i pozicionimit është i disponueshëm nëpërmjet skripteve. Kështu, ju mund të ndryshoni dinamikisht pozicionin e elementeve pa ringarkuar faqen, duke krijuar animacion dhe efekte të ndryshme.
Pozicionimi normal
Nëse vetia e pozicionit të një elementi nuk është vendosur ose vlera e tij është statike, elementi paraqitet në rrjedhën e dokumentit si normal. Me fjalë të tjera, elementët shfaqen në faqe sipas renditjes që shfaqen në kodin burimor HTML.
Karakteristikat majtas, lart, djathtas, poshtë, nëse përcaktohen, injorohen.
Pozicionimi absolut
Me pozicionimin absolut, elementi nuk ekziston në rrjedhën e dokumentit dhe pozicioni i tij është në lidhje me skajet e shfletuesit. Ju mund ta vendosni këtë lloj përmes vlerës absolute të vetive të pozicionit. Koordinatat janë të specifikuara në lidhje me skajet e dritares së shfletuesit, e quajtur "zona e dukshme" (Fig. 3.42).
Oriz. 3.42. Vlerat e pronës majtas, djathtas, lart dhe poshtë për pozicionimin absolut
Modaliteti ka karakteristikat e mëposhtme.
- Gjerësia e shtresës, nëse nuk është vendosur në mënyrë eksplicite, është e barabartë me gjerësinë e përmbajtjes plus vlerat e kufirit, kufirit dhe mbushjes.
- Një shtresë nuk e ndryshon pozicionin e saj origjinal nëse nuk ka vetitë djathtas, majtas, lart dhe poshtë.
- Vetitë majtas dhe lart kanë përparësi ndaj vetive të djathta dhe të poshtme. Nëse e majta dhe e djathta kundërshtojnë njëra-tjetrën, atëherë vlera e së djathtës shpërfillet. E njëjta gjë vlen edhe për pjesën e poshtme.
- Nëse majta është vendosur në një vlerë negative, atëherë shtresa do të shkojë përtej skajit të majtë të shfletuesit dhe shiriti i lëvizjes nuk do të shfaqet. Kjo është një mënyrë për të fshehur një element nga pamja. E njëjta gjë vlen edhe për pronën e sipërme, vetëm shtresa do të shkojë përtej skajit të sipërm.
- Nëse majtas vendoset në një vlerë më të madhe se gjerësia e zonës së dukshme, ose vendoset djathtas me një vlerë negative, do të shfaqet një shirit lëvizës horizontal. I njëjti rregull vlen edhe për pjesën e sipërme, përveç që po flasim për një shirit rrotullimi vertikal.
- Karakteristikat majtas dhe djathtas të specifikuara në të njëjtën kohë formojnë gjerësinë e shtresës, por vetëm nëse gjerësia nuk është e specifikuar. Vlen të shtohet vetia width dhe vlera e së drejtës do të shpërfillet. E njëjta gjë do të ndodhë me lartësinë e shtresës, vetëm cilësitë e sipërme, të poshtme dhe të lartësisë janë përfshirë tashmë.
- Një element i pozicionuar absolut lëviz me dokumentin ndërsa lëviz.
Vetia e pozicionit, e vendosur në absolute, mund të përdoret për të krijuar efektin e kornizave. Përveç pozicionimit absolut, elementëve duhet t'u caktohet një veçori tejmbushjeje me një vlerë auto. Më pas, kur përmbajtja tejkalon lartësinë e zonës së dukshme, do të shfaqet një shirit lëvizës. Lartësia dhe gjerësia e "kornizave" gjenerohet automatikisht duke përdorur njëkohësisht vetitë majtas, djathtas për gjerësinë dhe lart, poshtë për lartësinë (shembulli 3.31).
Shembulli 3.31. Krijimi i një analoge të kornizave
Plov i popujve të botës
Pilafi në Ferganë
Vendoseni në kazan mishin e prerë në feta dhe skuqeni derisa të formohet një kore. Skuqini rrathët e copëtuar të qepës së bashku me mishin derisa të marrin ngjyrë të kuqërremtë, më pas shtoni karotat, të prera në rripa. Hidhni gjysmën e kripës, përzieni gjithçka dhe skuqni derisa karotat të marrin ngjyrë kafe të artë. Pas kësaj, derdhni gjysmën e sasisë së kërkuar të ujit dhe lëreni të vlojë.
Hidhni orizin në një shtresë të barabartë, rrisni zjarrin dhe menjëherë derdhni ujë në mënyrë që të mbulojë orizin me 1–1,5 cm sipërfaqe, shkoi deri në fund. Më pas mbulojeni pilafin dhe lëreni të pushojë për 20-25 minuta.
Përzieni plotësisht pilafin e përfunduar, transferojeni në një pjatë të madhe, vendosni mishin sipër.
Rezultati i këtij shembulli është paraqitur në Fig. 3.43. Shtresa e kokës paraqitet në rrjedhë si zakonisht, dhe shiriti anësor dhe shtresat e përmbajtjes vendosen në pozicionim absolut.
Oriz. 3.43. Zbatimi i pozicionimit absolut
Në IE6, elementët e pozicionuar absolutisht nuk mund të kenë veçoritë majtas, djathtas dhe lart, poshtë të vendosura në të njëjtën kohë.
Pozicionimi absolut përdoret gjithashtu për të krijuar efekte të ndryshme, si p.sh. këshilla për veglat e fotografisë. Ndryshe nga atributi i titullit të etiketës i cili gjithashtu shfaq tekstin e këshillës së veglave, përmes stileve mund të kontrolloni pamjen e tekstit të shfaqur duke përdorur skriptin.
Së pari, le të krijojmë një shtresë boshe me një ID të floatTip dhe të përcaktojmë stilin e saj. Duhet të kërkohen tre veti stilesh - pozicioni është vendosur në absolute, ekrani i caktuar në asnjë fsheh shtresën dhe gjerësia përcakton gjerësinë e shtresës së këshillës së veglave. Karakteristikat e mbetura përdoren me kërkesë të zhvilluesit dhe synojnë të ndryshojnë modelin e shtresës (shembulli 3.32).
Shembulli 3.32. Stili i këshillës së veglave
#floatTip ( pozicioni: absolute; /* Pozicionimi absolut */ gjerësia: 250 px; /* Gjerësia e bllokut */ shfaqja: asnjë; /* Fshehja nga pamja */ kufiri: 1px solid #000; /* Opsionet e kufirit */ mbushja: 5 px ; /* Margjina rreth tekstit */ font-family: sans-serif; /* Shkronja e dhëmbëzuar */ madhësia e shkronjave: 9pt; /* Madhësia e shkronjave */ ngjyra: #333; /* Ngjyra e tekstit */ sfondi: #ECF5E4; /* Ngjyrë e sfondit */ )
Vetë skripti përbëhet nga dy funksione - moveTip() ndjek lëvizjen e miut dhe ndryshon pozicionin e shtresës sipas koordinatave të kursorit, dhe toolTip() kontrollon dukshmërinë e shtresës dhe shfaq tekstin e dëshiruar në të (shembulli 3.33).
Shembulli 3.33. Skripti i daljes së shtresës
dokument.onmousemove = moveTip; funksioni moveTip(e) (floatTipStyle = document.getElementById("floatTip").style; w = 250; // Gjerësia e shtresës // Për IE if (document.all) (x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // Për shfletues të tjerë ) other ( x = e.pageX; // Kursorin X koordinata y = e.pageY; // Kursorin Y koordinata ) // Trego shtresën në të djathtë i kursorit nëse ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }
Për lehtësi dhe shkathtësi, skripti duhet të zhvendoset në një skedar të veçantë dhe të lidhet përmes atributit src të etiketës
Lente "+": Canon EF 24-105 f/4L IS USM
Flash "+": Canon Speedlite 580 EX
"+" Shpejtësia e diafragmës: 1/125
Apertura: 5.6")" onmouseout="toolTip()" />