Përditësimi i fundit: 28.04.2016

CSS ofron mundësinë për të pozicionuar një element, domethënë, ne mund të vendosim një element në një vend të caktuar në faqe.

Vetia kryesore që kontrollon pozicionimin në CSS është vetia e pozicionit. Kjo pronë mund të marrë një nga vlerat e mëposhtme:

statike: pozicionimi standard i elementit, i paracaktuar

absolute: elementi pozicionohet në lidhje me kufijtë e elementit të kontejnerit nëse vetia e pozicionit të atij elementi nuk është statike.

relative: Elementi pozicionohet në raport me pozicionin e tij të paracaktuar. Në mënyrë tipike, qëllimi kryesor i pozicionimit relativ nuk është të lëvizë një element, por të vendosë një pikë të re ankorimi për pozicionimin absolut të elementeve të mbivendosur.

fiks: elementi është i pozicionuar në lidhje me dritaren e shfletuesit, kjo ju lejon të krijoni elemente fikse që nuk ndryshojnë pozicionin kur lëvizni

Ju nuk duhet të aplikoni njëkohësisht veçorinë float dhe ndonjë lloj pozicionimi përveç statik (që është, tipi i paracaktuar) në një element.

Pozicionimi absolut

Porta e shikimit të shfletuesit ka skajet e sipërme, të poshtme, të djathta dhe të majta. Për secilën nga këto katër skaje, ekziston një veti përkatëse CSS: majtas (margjina e majtë), djathtas (diferenca e djathtë), sipër (diferenca e sipërme nga buza e kontejnerit) dhe poshtë (diferenca e poshtme). Vlerat e këtyre vetive janë të specifikuara në piksel, em ose përqindje. Nuk keni nevojë të specifikoni vlera për të katër anët. Në mënyrë tipike, vendosen vetëm dy vlera - kufiri i sipërm nga lart dhe diferenca e majtë nga e majta.

PËRSHENDETJE BOTË

Këtu div i pozicionuar absolutisht do të jetë 100 piksele në të majtë të kufirit të portit të pamjes dhe 50 pikselë nga fundi.

Nuk ka shumë rëndësi që ka elementë të tjerë pas kësaj ndarjeje. Gjithsesi, ky div do të pozicionohet në lidhje me kufijtë e pamjes së shfletuesit.

Nëse një element me pozicionim absolut ndodhet në një enë tjetër, në të cilën, nga ana tjetër, vlera e vetive të pozicionit nuk është e barabartë me statike, atëherë elementi pozicionohet në lidhje me kufijtë e kontejnerit:

Pozicionimi relativ

Pozicionimi relativ specifikohet gjithashtu duke përdorur vlerën relative. Të njëjtat veti lart, majtas, djathtas, poshtë aplikohen për të treguar pozicionin specifik në të cilin është zhvendosur elementi:

Vetia e indeksit Z

Si parazgjedhje, kur dy elemente kufitare përputhen, elementi që është përcaktuar për herë të fundit në shënimin html shfaqet mbi tjetrin. Megjithatë, vetia z-index ju lejon të ndryshoni rendin e elementeve kur ato mbivendosen. Prona merr një numër si vlerë. Artikujt me një vlerë më të madhe të indeksit z do të shfaqen në krye të artikujve me një indeks z më të ulët.

Për shembull:

Tani le të shtojmë një rregull të ri në stilin redBlock:

RedBlock (z-indeksi: 100; pozicioni: absolut; lart: 20 px; majtas: 50 px; gjerësia: 80 px; lartësia: 80 px; ngjyra e sfondit: e kuqe;)

Këtu indeksi z është 100. Por nuk duhet të jetë 100. Meqenëse indeksi z i bllokut të dytë është i papërcaktuar dhe në fakt është zero, ne mund ta vendosim vetinë z-indeks në çdo vlerë më të madhe se zero për redBlock.

Dhe tani blloku i parë do të mbivendoset mbi të dytin, dhe jo anasjelltas, siç ishte në fillim.

Kur punon me tekst, përdoruesi mund të ketë nevojë të ndërrojë fjali ose paragrafë të tërë, ose të rregullojë fragmente në një mënyrë jo standarde. Ka disa mënyra për të zhvendosur një bllok teksti në Microsoft Office Word.

udhëzime

Është e nevojshme të lëvizni (tërhiqni, ktheni, etj.) 3 blloqe themeli 300x600x2400 të paktën 3-5 metra. Problemi është se ato ndodhen prapa shtëpisë dhe nuk ka akses për vinç apo pajisje të tjera speciale.
Më vonë doja të përdorja blloqet për ndërtimin e një verande. Por tani më duhet vetëm të çliroj vendin ku shtrihen - po planifikoj një kulm-arbor atje.
Pesha e secilës (nëse e kam llogaritur saktë) është rreth 1 ton. Ndonjë mendim për këtë?

Po, nuk është e lehtë, por e realizueshme. Vjehrri im dhe unë morëm një fole të zakonshme makine dhe disa tuba dhe skrap në dukje dy inç. Të tre blloqet tanë shtriheshin gjithashtu në një vend të papërshtatshëm, i lëvizëm me 15 metra.Bëmë këtë: Nën skajin e bllokut (ata ishin shtrirë anash, pra në skajin më të gjerë) hapën një gropë mjaft të thellë. për të lejuar folenë dhe dorën të kalonin, në mënyrë që të lëvizte levën e tij. Një pjesë e vogël e një dërrase të sheshtë u vendos në fund të vrimës, në mënyrë që të mos njolloste folenë dhe në mënyrë që nën ngarkesë të mos gërmonte në tokë. Më tej, ata e ngritën bllokun mjaft mirë nga njëra skaj, duke e shtyrë nga poshtë me një fole. Nuk e di saktësisht se në çfarë këndi, në krahasim me tokën, por në mënyrë që disa mbetje tubash gjysmë metër të vendosen në mënyrë të barabartë nën bllok. Pastaj foleja u ul dhe blloku u vendos në tuba dhe u rrafshua me sipërfaqen e tokës. Më tej, në pjesën më të gjatë të tubit (~ 1,8 m), i cili nuk ishte vendosur nën bllok, u fut një levë (për ngurtësi) dhe ky hibrid u përdor si levë, duke e goditur me çekan nën skajin tjetër të bllokut dhe duke e ngritur atë në lidhje me tokën (duke rritur këndin midis levës dhe tokës) duke e shtyrë bllokun sikur nga vetja. Parimi i lëvizjes së blloqeve të piramidave egjiptiane. Në vend të trungjeve u përdorën vetëm tuba si rula. Nëse toka është e lëngshme, fillimisht mund të vendosni dërrasa të gjata të sheshta nën tuba përpara se të ulni folenë, në mënyrë që tubat të mos gërmohen nën peshën e bllokut. Shtyjmë, duke mos harruar të vendosim një tub të ri nën "hundën" e bllokut dhe përgatisim tubin e lëshuar nga poshtë "stërmës" si tjetri nën hundë.
Në total, këto blloqe me një kohëzgjatje prej 3 vitesh i rrotullonim çdo verë derisa i rrotullonim në portë. Të gjithë menduan se si t'i përdornin ato, por ata nuk ia dolën kurrë. Ne porositëm një manipulator, ai i ngarkoi mbi vete te porta dhe i nxori në drejtim të panjohur, kundrejt një pagese.
Vështirësitë lindin në kthesat nëse janë, por gjithçka është gjithashtu e realizueshme nëse trokitni tubat me një vare nën bllok, duke i vendosur drejtimin dhe duke rregulluar pozicionin e bllokut me një levë nga anët. Duket vetëm e rëndë, dhe pastaj mësohesh me të.

P.S. Na ndihmoi shumë çikriku, të cilin e blemë enkas për këto blloqe. Grepa e çikrikut mund të lidhet me shtyllat nga gardhi (jonë e bëri normalisht) dhe blloqet mund të tërhiqen përmes tubave në këto shtylla me një çikrik. Blloku duhet të ketë 2 priza të përforcuara, kështu që çikriku të jetë i lidhur me to. Kjo është më e lehtë sesa të shtysh me levë, por kërkon më shumë kohë dhe gjithashtu kërkon shumë përpjekje - vrapimi gjatë gjithë kohës për të rilidhur çikrikën në shtyllën tjetër.

P.P.S. Shpjegoi se si ai mund të Nëse kjo - më fal.

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;)

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:

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

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

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;)

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ë korrigjohet pak, duke lënë vendin 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)

Vlad Merzheviç

Pozicionimi i referohet pozicionit të 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ë pozicionit, vetive majtas, sipër, djathtas dhe poshtë, një element mund të mbivendoset mbi njëri-tjetrin, të shfaqet në një pikë me koordinata të caktuara, të fiksuara në një vend të caktuar, të përcaktojë pozicionin e një elementi në lidhje me një tjetër, etj. Ashtu si vetitë e tjera CSS, kontrolli i pozicionimit është i disponueshëm përmes skripteve. Kështu, ju mund të ndryshoni në mënyrë dinamike pozicionin e elementeve pa ringarkuar faqen, duke krijuar animacione dhe efekte të ndryshme.

Pozicionimi normal

Nëse vetia e pozicionit nuk është caktuar për një element ose është statike, elementi paraqitet në rrjedhën e dokumentit si zakonisht. Me fjalë të tjera, elementët shfaqen në faqe sipas renditjes që shfaqen në burimin HTML.

Vetitë majtas, lart, djathtas, poshtë, nëse specifikohen, 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ë kur pozicionohen në absolute

Modaliteti ka karakteristikat e mëposhtme.

• Gjerësia e shtresës, nëse nuk përcaktohet në mënyrë eksplicite, është gjerësia 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ë kalojë skajin e sipërm.
• Nëse majtas është vendosur në një vlerë më të madhe se gjerësia e zonës së shikimit, ose nëse djathtas është specifikuar me një vlerë negative, shfaqet një shirit lëvizës horizontal. Një rregull i ngjashëm funksionon me pjesën e sipërme, vetëm me shiritin vertikal të lëvizjes.
• Njëkohësisht, vetitë e specifikuara majtas dhe djathtas formojnë gjerësinë e shtresës, por vetëm nëse gjerësia nuk është e specifikuar. Shtoni veçorinë gjerësi dhe vlera e duhur do të shpërfillet. E njëjta gjë do të ndodhë me lartësinë e shtresës, vetëm vetitë e sipërme, të poshtme dhe të lartësisë janë përfshirë tashmë.
• Një element i pozicionuar absolutisht lëviz me dokumentin ndërsa lëviz.

Vetia e pozicionit e vendosur në absolute mund të përdoret për të krijuar një efekt kornizë. Përveç pozicionimit absolut, elementëve duhet t'u caktohet vetia e tejmbushjes me vlerën automatike. 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" gjenerohen automatikisht duke përdorur vetitë majtas, djathtas për gjerësinë dhe lart, poshtë për lartësinë në të njëjtën kohë (shembulli 3.31).

Shembulli 3.31. Krijimi i një analoge të kornizave

Rezultati i këtij shembulli është paraqitur në Fig. 3.43. Shtresa e kokës paraqitet në transmetim 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ë vendosen në të njëjtën kohë në vetitë majtas, djathtas dhe lart, poshtë.

Pozicionimi absolut përdoret gjithashtu për të krijuar efekte të ndryshme, si p.sh. këshilla veglash për fotot. Në krahasim me atributin e 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 ID-në floatTip dhe të përcaktojmë stilin e saj. Duhet të kërkohen tre veti të stilit - pozicioni me vlerën absolute, shfaqja me vlerën asnjë nuk fsheh shtresën dhe gjerësia përcakton gjerësinë e shtresës së këshillës. Pjesa tjetër e vetive përdoren me kërkesë të zhvilluesit dhe synojnë të ndryshojnë pamjen e shtresës (shembulli 3.32).

Shembulli 3.32. Stili i këshillës së veglave

#floatTip (pozicioni: absolut; / * Pozicionimi absolut * / gjerësia: 250 px; / * Gjerësia e bllokut * / shfaqja: asnjë; / * Fshih nga ekrani * / kufiri: 1 px solid # 000; / * Opsionet e kornizës * / mbushja: 5 px ; / * Margjinat rreth tekstit * / font-familja: sans-serif; / * Shkronja e prerë * / madhësia e shkronjave: 9pt; / * Madhësia e shkronjave * / ngjyra: # 333; / * Ngjyra e tekstit * / sfondi: # ECF5E4; /* Ngjyra e sfondit */ )

Vetë skripti përbëhet nga dy funksione - moveTip () gjurmon lëvizjen e miut dhe ndryshon pozicionin e shtresës në përputhje me koordinatat e kursorit, dhe toolTip () kontrollon dukshmërinë e shtresës dhe shfaq tekstin e dëshiruar në të. (shembulli 3.33).

Shembulli 3.33. Skript për daljen e shtresës

Document.onmousemove = moveTip; funksioni moveTip (e) (floatTipStyle = document.getElementById ("floatTip"). stil; w = 250; // Gjerësia e shtresës // Për shfletuesin IE if (document.all) (x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // Për shfletues të tjerë) else (x = e.pageX; // X koordinata e kursorit y = e.pageY; // koordinata Y e kursorit) // Trego shtresën në të djathtë të 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ë vendoset 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
"+" Ekspozimi: 1/125
Hapja: 5.6 ")" onmouseout = "toolTip ()" />

Rezultati i këtij shembulli është paraqitur në Fig. 3.44. Vini re se mbështjelljet e tekstit në thirrjen e funksionit toolTip () janë për lexueshmëri dhe përdorin sintaksë JavaScript. Në Safari, skenari ndonjëherë nuk funksionon me mbështjelljen e tekstit, në këtë rast teksti duhet të shkruhet në një rresht. U shtua tipari i opacitetit CSS3 në stile, gjë që shton pak transparencë në shtresë. Përpara IE 9.0, kjo pronë nuk mbështetet.

Oriz. 3.44. Këshilla e veglave është dhënë me JavaScript

Pozicioni fiks

Pozicioni fiks i shtresës përcaktohet nga vetia e pozicionit fiks dhe është i ngjashëm në efekt me pozicionimin absolut. Por ndryshe nga ai, ai lidhet me pikën e specifikuar majtas, lart, djathtas dhe poshtë në ekran dhe nuk e ndryshon pozicionin e tij kur lëviz në faqen e internetit. Një tjetër ndryshim nga absolute është se kur një shtresë fikse lë zonën e dukshme djathtas ose poshtë saj, nuk shfaqen shirita lëvizjeje.

Ky lloj pozicionimi përdoret për të krijuar meny, skeda, tituj, në përgjithësi, çdo element që duhet të ngjitet në faqe dhe gjithmonë të dukshëm për vizitorin. Shembulli 3.35 tregon shtimin e një footer, i cili mbetet në një vend, pavarësisht nga sasia e informacionit në sajt.

Shembulli 3.35. Bodrum i fiksuar

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultati i shembullit është paraqitur në Fig. 3.45. Meqenëse fundi i fiksuar mbivendos tekstin dhe e fsheh atë, ne shtuam mbushjen e poshtme për përzgjedhësin BODY. IE6 nuk e mbështet vlerën fikse, kështu që ky shembull nuk do të funksionojë siç duhet në të.

Oriz. 3.45. Fundi në fund të faqes

Pozicionimi relativ

Nëse vendosni vetinë relative të veçorisë së pozicionit, atëherë pozicioni i elementit është në raport me pozicionin e tij origjinal. Shtimi i vetive majtas, lart, djathtas dhe poshtë ndryshon pozicionin e elementit dhe e zhvendos atë në njërën anë ose në tjetrën nga pozicioni i tij origjinal. Një vlerë pozitive për të majtën specifikon një zhvendosje në të djathtë të kufirit të majtë të elementit, një vlerë negative specifikon një zhvendosje në të majtë. Një vlerë pozitive e lart specifikon zhvendosjen e elementit poshtë (Fig. 3.46), një vlerë negative specifikon zhvendosjen lart.

Oriz. 3.46. Vlerat e pronës majtas dhe të larta për pozicionimin relativ

Vetitë e poshtme dhe të djathta kanë efektin e kundërt. Nëse vlera është pozitive, djathtas e zhvendos elementin në të majtë të skajit të djathtë, nëse është negativ, e zhvendos në të djathtë (Fig. 3.47). Një vlerë pozitive e fundit e lëviz elementin lart, dhe një vlerë negative e zhvendos atë poshtë.

Oriz. 3.47. Vlerat e pronës djathtas dhe të poshtme për pozicionimin relativ

Pozicionimi relativ ka karakteristikat e mëposhtme.

• Ky lloj pozicionimi nuk është i zbatueshëm për elementët e tabelës si qelizat, rreshtat, kolonat, etj.
• Kur elementi zhvendoset në lidhje me pozicionin e tij origjinal, vendi ku elementi zë mbetet bosh dhe nuk mbushet me elementë poshtë ose sipër.

Shembulli 3.36 tregon zhvendosjen poshtë të tekstit të titullit për t'i dhënë atij një stil të veçantë shkrimi.

Shembulli 3.36. Titulli i tekstit

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Az dhe ahu të shkencës së shkronjave

Shkronja është një mjet për të shprehur dizajnin, jo një lexim i parëndësishëm.

Rezultati i këtij shembulli është paraqitur në Fig. 3.48.

Oriz. 3.48. Zhvendosja e tekstit nga pozicioni i tij origjinal

Shtresa të mbivendosura

Zakonisht, vetë pozicionimi relativ nuk përdoret shpesh, pasi ka një numër pronash që në fakt kryejnë të njëjtin rol, për shembull, të njëjtin diferencë. Por kombinimi i llojeve të ndryshme të pozicionimit për shtresat e mbivendosura është një nga teknikat më të përshtatshme dhe praktike të paraqitjes. Nëse vendosni relativ për elementin prind dhe absolut për fëmijën, atëherë sistemi i koordinatave do të ndryshojë dhe pozicioni i elementit fëmijë tregohet në raport me prindin e tij (Fig. 3.49).

Oriz. 3.49. Vlerat e vetive majtas, djathtas, lart dhe poshtë në shtresat e mbivendosura

Koordinatat numërohen nga skaji i brendshëm i kufirit; vlerat e fushës nuk merren parasysh. Shembulli i mëposhtëm vendos tekstin në këndin e poshtëm djathtas të një shtrese pranë kufirit, duke injoruar vetinë e mbushjes.

Teksti

Duke përdorur katër vetitë majtas, djathtas, lart, poshtë për të kontrolluar pozicionin e shtresës së brendshme, nuk keni nevojë të dini madhësinë e shtresës mëmë. Kjo zgjeron fushën e pozicionimit, kështu që pozicioni përdoret mjaft aktivisht në paraqitjen e elementeve të ndryshëm. Si shembull, le të marrim mbivendosjen e një fotoje me informacione të ndryshme: numrin e komenteve në të, lidhjet "Shto koment", "Informacione rreth autorit" dhe "Shto në të preferuarat". Në përgjithësi, rezultati duhet të jetë diçka si Fig. 3.50.

Oriz. 3.50. Foto me elementë të mbivendosur

Vetë kodi tregohet në shembullin 3.37. Shtresa e fotografisë është vendosur në pozicionimin relativ dhe shtresat e brendshme img (dalja e fotos), komenti (numri i komenteve) dhe mjeti (lidhjet në fund të fotos) janë vendosur në pozicionim absolut.

Shembulli 3.37. Shtresat e pozicionimit

XHTML 1.0 CSS 2.1 CSS 3 IE 7+ IE 9+ Cr Op Sa Fx

134