Vendosja e blloqeve në css. Përmbajtja e pozicionimit

Pozicionimi i blloqeve css një nga fazat më të rëndësishme të paraqitjes, sepse kjo është ajo që ndikon në përshtatshmërinë e faqes ose mundësinë e zbatimit të saj në të ardhmen (nëse nuk kërkohet për momentin), dhe gjithashtu ka një ndikim të rëndësishëm në shkallëzimin e mëtejshëm të sitit . Nuk janë të rralla rastet kur "dizajnerët e pafat të layout" bëjnë një paraqitje të tillë që në fund të jetë më e lehtë ta hedhësh jashtë sesa të ndryshosh diçka, por në të njëjtën kohë mund të duket plotësisht në përputhje me paraqitjen. Kjo situatë lind nga moskuptimi se ku dhe kur të përdoret ky apo ai lloj pozicionimi. Sot do të përpiqemi ta kuptojmë këtë çështje. Dhe kështu, në css ka një pronë pozicion. Kjo pronë mund të marrë 5 vlera, por ne do të shqyrtojmë 4 ato kryesore:

• absolute
• statike
• i afërm
• fikse

Pozicionimi absolut i blloqeve (absolut)

E para në listën tonë është metoda e pozicionimit absolut. Kur caktohet kjo veti, blloku bëhet një njësi më vete dhe pjesa tjetër e elementeve të faqes nuk ndikojnë në vendndodhjen e tij, si dhe nuk ndikon në elementë të tjerë. Madhësia e kutisë përcaktohet nga vetitë e gjerësisë dhe lartësisë, dhe pozicioni në faqe përcaktohet nga vetitë e sipërme. majtas, djathtas dhe poshtë këta parametra vendosin kufijtë nga skajet e sipërme, të majta, të djathta dhe të poshtme. Nëse blloku nuk ka një element prind, si dhe nëse pozicionimi i elementit prind është i ndryshëm nga ai statik, atëherë vetitë lart, majtas, poshtë, djathtas vendosin indencat nga fillimi i faqes, përndryshe nga skajet e elementi mëmë.

Më shpesh, ky lloj pozicionimi përdoret kur blloku duhet të shtypet në skajin e djathtë ose të poshtëm. Konsideroni një plan urbanistik të tillë.

Për lehtësi, blloqet janë theksuar me një kornizë me shumë ngjyra. Shënimi do të duket si ky:

XHTML

Lidhja (pozicioni: relative;) .e verdhë (pozicioni: absolut; djathtas: 10 px; fundi: 10 px;)

Lidhja pozicioni: i afërm; E verdhe pozicioni: absolut; djathtas: 10px; fundi: 10 px;

Në këtë shembull, ne përdorëm vetitë e djathta dhe të poshtme për të vendosur dhëmbëzimin nga skajet e djathta dhe të poshtme. Këto vlera të vetive janë ekuivalente me lart: Lartësia e elementit - 10 px dhe e majta: Gjerësia e elementit - 10 px.

Gjithashtu, pozicionimi absolut përdoret ndonjëherë kur është e nevojshme të bëhet një "përmbysje" e një elementi në tjetrin.

Pozicionimi statik

Lloji më i zakonshëm i pozicionimit që ndodh në çdo faqe dhe zakonisht vendoset për shumicën e elementeve është statik, në css shkruhet si statik. Për shumicën e etiketave HTML, kjo vlerë përcaktohet si parazgjedhje, d.m.th. nëse pozicioni nuk është vendosur në mënyrë eksplicite, atëherë vlera do të jetë statike. Me këtë renditje, elementet rreshtohen njëri mbi tjetrin dhe koordinatat në dritaren e secilit element varen nga elementët më të afërt me pozicion: statik ose pozicion: relativ. Karakteristikat e sipërme, majtas, djathtas, poshtë nuk do të funksionojnë me këtë pozicionim, pozicioni është ndryshuar për shkak të vetive të marzhit.

Pozicionimi relativ

Ky lloj pozicionimi është shumë i ngjashëm me pozicionimin statik, përveç se pozicioni i elementit mund të ndryshohet me vetitë e sipërme, majtas, djathtas, poshtë dhe margjina.

Pozicionimi i fiksuar

Pozicionimi fiks sipas specifikave të specifikimit të koordinatave është i ngjashëm me atë absolut, por pozicioni llogaritet jo në lidhje me faqen HTML, por në lidhje me dritaren e shfletuesit, d.m.th. me krye: 10 px, ju do të vendosni mbushjen e sipërme në 10 px NGA DRITARJA E SHFLETËSIT dhe pa marrë parasysh se në cilin nivel të lëvizjes jeni, ky element do të ndjekë gjithmonë ekranin tuaj.

Zakonisht përdoret për elementë navigimi, në mënyrë që përdoruesi të ketë gjithmonë në sy informacione të rëndësishme ose lidhje me faqe interesante.

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.

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.

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.

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

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 ().

Analogji e plotë me pronën

Për elementët inline

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

ose

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.

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.

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 elementit	skaji i elementit mëmë	skaji i dritares së shfletuesit
elementet përreth	merrni parasysh pozicionin aktual të elementit	merrni 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 faqes	lë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.

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 Blloku i kuq.

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

Një nga gjërat më të mira në lidhje me CSS është se stilet na japin mundësinë për të pozicionuar përmbajtjen dhe elementët në një faqe pothuajse në çdo mënyrë që mund të mendojmë. Kjo sjell strukturë në dizajnin tonë dhe ndihmon për ta bërë përmbajtjen më vizuale.

Ekzistojnë disa lloje të ndryshme pozicionimi në CSS, secila prej të cilave ka shtrirjen e vet. Në këtë kapitull, ne do t'i hedhim një vështrim disa rasteve të ndryshme të përdorimit - duke krijuar paraqitje të ripërdorshme dhe pozicionim unik të artikujve të vetëm - dhe duke përshkruar disa metoda se si ta bëni këtë.

Pozicionimi i notit

Një mënyrë për të pozicionuar elementët në faqe është përmes vetive float. Kjo veçori është mjaft e gjithanshme dhe mund të zbatohet në shumë mënyra.

Në thelb, vetia float merr një element, e nxjerr atë nga rrjedha normale e faqes dhe e pozicionon majtas ose djathtas të elementit prind. Të gjithë elementët e tjerë në faqe do të mbështjellin një element të tillë. Për shembull, paragrafët do të mbështjellin imazhin nëse elementi është vendosur vetia float.

Kur vetia float zbatohet në shumë elementë në të njëjtën kohë, bën të mundur krijimin e një plan urbanistik me elementë të float pranë ose përballë njëri-tjetrit, siç tregohet në një paraqitje me shumë kolona.

Vetia float pranon disa vlera, dy më të njohurat janë majtas dhe djathtas, të cilat lejojnë një element të notojë majtas ose djathtas të prindit të tij.

Img (lundrues: majtas;)

noton në praktikë

Le të krijojmë një plan urbanistik të përgjithshëm të faqes me një kokë në krye, dy kolona në qendër dhe një fund në fund. Në mënyrë ideale, kjo faqe duhet të shënohet me elementët

,

,