Rooters je pogosto težko pozicionirati elemente prek CSS. Pravzaprav se je lastnost CSS Position lažje naučiti, kot se zdi na prvi pogled. Ko ga obvlada, boste dobili močno orodje, ki vam omogoča, da uredite vse elemente strani na pravih mestih. Da bi dosegli rezultat, moramo poznati vse obstoječe pomene, saj se načela njihovih dejanj močno razlikujejo

.

Specifičnost izdelave toka dokumenta

Položaj CSS deluje s pretokom spletne strani. Kako ga razumeti? Privzeto so vsi elementi strani urejeni v vrstnem redu, po katerem ste jih ustvarili v oznaki html. Če je glava oznake nad oznako nožice, bo stran prikazana zgoraj. Nasprotno, če se odločite, da nogo postavite v html preko "gostitelja", bo "klet" strani prikazana nad "klobukom". V tem primeru blokovni elementi zavzemajo vso širino, ki jim je na voljo. Linearni, nato pa so razporejeni v eni vrstici, dokler ne vzamejo vse, nato pa se začnejo prenašati v novo. Ta vrstni red se imenuje tok dokumenta. "


Če želite spremeniti vedenje toka, uporabite lastnost Position v CSS. Prav tako se lahko spremeni zaradi float lastnosti, vendar je ne bomo upoštevali. S pomočjo pozicioniranja je mogoče prisiliti element "izpadati" iz navadnega toka, po katerem se bo začel obnašati na nov način. Kako točno - je odvisno od vrednosti uporabljenega premoženja.

CSS Pozicija: statična

Položaj: statično ali statično pozicioniranje je privzeta vrednost za vse html bloke, ki ste jih ustvarili. V normalnih okoliščinah vam tega ni treba obravnavati. Če za kateri koli blok ali vrstico sploh ni določen noben položaj, potem ima vrednost static. Na strani se ta komponenta prikaže v skladu s tokom. Če določite lastnosti levo /desno ali zgornje /spodnje, ne bo nobenega učinka.

Položaj CSS: fiksen

Pri uporabi te lastnosti je element izven običajnega toka dokumenta. Sedaj se njegov položaj izračuna glede na okno brskalnika, ne glede na to, kako so nameščene druge komponente. Z drugimi besedami, pozicija: fiksni blok bo šel na vrh strani, pritrjen na rob okna brskalnika, drugi elementi pa bodo zasedli njegovo mesto v skladu s tokom. Glavna značilnost elementov s stalnim razvrščanjem je, da lahko prekrivajo druge bloke in nize strani. Pri premikanju bloka s Položaj: fiksno se zdi, da ostane na mestu, ne da bi izginilo iz zaslona. To je uporabno, če morate narediti navigacijo ali podoben element, do katerega mora imeti uporabnik vedno dostop. Fiksno pozicioniranje velja tudi, če želite na določen del strani postaviti gumb za hitro pomikanje.

Položaj CSS: relativni

Uporaba te lastnosti se imenuje relativno pozicioniranje. Če nastavite lastnost elementa Position: relative, tobo ostal v veljavi. Na prvi pogled se ne bo zgodilo nič posebnega, vendar se bo vse spremenilo, če dodatno uporabite lastnosti desno /levo in vrh /dno. Z njihovo pomočjo lahko nadzorujete gibanje komponente glede na njeno lokacijo. Na mestu, kjer je bil blok ali linija prej, bo prazen prostor - ostali elementi bodo ostali v svojih položajih, ne da bi bili pozorni na prazen prostor.
Pri premikanju komponent ne vpliva na položaj okoliških delov strani. Ostajali bodo na svojih mestih, čeprav jih lahko blokira. Samo po sebi se lastnina redko uporablja. Običajno se uporablja v kombinaciji z naslednjo možnostjo.

Absolutno pozicioniranje

Ena izmed najbolj zanimivih in najbolj uporabljenih variant. Če uporabite lastnost Position z absolutno vrednostjo komponente, bo komponenta strani upoštevana v oknu brskalnika. Drugi elementi (ne popolnoma pozicionirani) kot da "pozabijo" na obstoj "sestre" s Položaj: absolutno in zavzamejo svoje mesto v toku. Zdi se, da je vse popolnoma enako kot v položaju: fiksno, vendar obstajajo resne razlike. Prvič, položaj elementa se lahko prosto nadzoruje - za to uporabite lastnosti zgornji /desni /spodnji /levi. Če na primer nastavite spodnjo vrednost na: 100px, bo blok izklopil "od spodaj" strani za 100 pik. Drugič, ko je pomikanje "absolutna" komponentabo ostala na mestu, namesto da bi se premikali po strani.

Interakcija absolutnih blokov s starševskimi elementi

Možno je doseči še natančnejši nadzor nad absolutno pozicionirno komponento. Če želite to narediti, morate nastaviti očetovo premoženje Položaj: fiksno, relativno ali absolutno. Razmislite o zgledu. Imate div z razredom relativne-div, znotraj katerega je razred div z razredom absolutnega-div. Notranji blok nastavimo na položaj: absolutno. Takoj "odleti" iz toka in se obrne nekje zgoraj, ker je zdaj njegova lokacija izračunana glede na okno brskalnika. Sedaj postavimo blok z relativnim-div razredom Položaj: relativni in "izgubljeni sin" se vrne na kraj. Skoraj Pravzaprav se pojavi v zgornjem levem kotu nadrejenega elementa.
Zakaj se to dogaja? Primer v specifiki položaja: absolutna lastnost. Njegovo stanje je privzeto odvisno od brskalnika, če pa je "nadrejeno" postavljeno tudi nekje zunaj statike, je položaj odvisen od matičnega elementa. To je zelo priročno, ker lahko komponento postavite kjerkoli, ne da bi v oknu brskalnika šteli ogromne številke. Sprejem se pogosto uporablja za postavitev ikon, gumbov in drugih manjših predmetov.

Postavite CSS v središče

Ena glavnih težav za začetnike je centriranje elementa navpično in vodoravno. Če uporabljate lastnost Position, je preprostejše. Položaj CSS: absolutno v sredinije nastavljen na naslednji način. Recimo, da imate d iv razred absolutnega div, ki je v božanskem razredu relativnega div. "Oče" je postavljen glede na njegovo širino, ki je enaka širini celotne strani. "Naslednik" ima širino in višino 400 px, absolutno pozicioniranje in privzeto se nahaja v zgornjem levem kotu nadrejenega elementa. Vse kar morate storiti je, da nastavite absolutno najvišjo komponento: 50% in levo: 50%. Skoraj končano! Absolute-div se je preselil iz kraja in se znašel skoraj v sredini, vendar sploh ne. Sredina "očeta" se nanaša na njegovo regijo, središče "potomca" pa moramo postaviti v središče bloka. To storite tako, da nastavite margin-left in margin-right z vrednostmi -200 px. Tako bomo premaknili absolutno postavljen blok za polovico njegove višine in širine. Vse, kar je v centru!

Prekrivanje komponent

Problem je lahko na prvi pogled zapleten, "prekrivni" element pozicioniranja na svojih "sosedah". Na primer, komponenta z Position: fixed bo prekrivala vse, kar se nahaja na strani. Stanje lahko popravite z lastnostjo indeksa z, vendar upoštevajte, da deluje le za postavljene elemente. Če želite postaviti blok nad postavko s fiksnim položajem, mora ta blok nastaviti tudi določanje položaja. Na primer, relativna. Najboljši način za obvladovanje pozicioniranja je pogled na primere položaja CSS, preizkusite in poskusite nekaj v svojem. Poskusite se naučitiuporabite ga v povezavi s funkcijo calc () - to vam bo omogočilo bolj fleksibilno konfiguracijo lokacije. Vendar ne pozabite, da ta lastnost ni namenjena izgradnji celotne mreže strani. Uporabite ga za premikanje sorazmerno majhnih elementov, sicer se lahko zelo zmede.