CSS Položaj: primeri

Člani novice za ličenje pogosto imajo težave pri pozicioniranju elementov prek CSS

Specifičnost gradnje dokumentov

Določite CSS deluje s pretokom spletne strani. Kako razumeti to? Privzeto so vsi elementi strani urejeni v vrstnem redu, v katerem ste jih ustvarili v html-oznaka. Če je oznaka glava ki se nahaja nad oznako noga, potem bo na strani prikazana zgoraj. In obratno, če se iz kakršnega koli razloga odločite za mesto noga v html nad "heder", bo "podstavek" strani prikazan nad "glava". V tem primeru blokovni elementi zasedajo vso razpoložljivo širino. Tisti, ki so manjši, so nato postavljeni v eno vrstico, dokler ne zasedejo vse, nato pa se začnejo prenesti v novo. To naročilo se imenuje »pretok dokumentov«.

Če želite spremeniti vedenje toka, uporabite lastnost Positionv CSS. Prav tako se lahko razlikuje zaradi lastnine float, vendar tega ne bomo upoštevali. S pomočjo pozicioniranja lahko element prisilite, da "izstopi" iz običajne niti, po kateri se bo začel obnašati na nov način. Kako natančno - odvisno od uporabljene vrednosti nepremičnine.

CSS Položaj: statičen

Položaj: statičen, ali statično pozicioniranje, je privzeta vrednost za vse bloke html, ki ste jo ustvarili. V normalnih okoliščinah se vam ni treba ukvarjati. Če za noben blok ali vrstico ni določeno nobeno pozicioniranje, potem ima vrednost statično. Na strani se takšna komponenta prikaže v skladu s tokom. Če podate lastnosti za to desno / levo ali zgoraj / spodaj, ne bo nobenega učinka.

Pozicija CSS: fiksna

Pri uporabi te lastnosti element je zunaj običajnega pretoka dokumenta. Zdaj se izračuna njen položaj glede na okno brskalnika, ne glede na to, kako so postavljene druge komponente. Z drugimi besedami, blok s položajem: fiksno pojdite na vrh strani, pritisnite do roba okna brskalnika, drugi elementi pa bodo v skladu s pretokom.

Glavna značilnost fiksno nameščenih elementov je, da se lahko prekrivajo drugi bloki in vrstice strani. Pri premikanju bloka s položajem: fiksno se zdi, da ostane na mestu, ne da bi izginil z zaslona. To je uporabno, če morate narediti navigacijo ali podoben element, do katerega mora uporabnik vedno imeti dostop. Fiksno pozicioniranje velja tudi, če želite na določenem delu strani postaviti gumb za hitro pomikanje.

Pozicija CSS: relativna

Uporaba te lastnosti se imenuje relativno pozicioniranje. Če nastavite lastnost postavke v položaj: relativni, ostati bo na njegovem mestu. Na prvi pogled se nič ne bo zgodilo, vse pa se bo spremenilo, če boste dodatno izkoristili lastnosti desno / levo in zgoraj / spodaj. Z njihovo pomočjo lahko nadzorujete gibanje komponente glede na njegovo lokacijo. Na mestu, kjer je bil blok ali črta prej, bo prazen prostor - drugi elementi ostanejo na svojih položajih in ne bodo pozorni na prazen sedež.

Ko premikate komponento, ne vpliva na položaj okoliških delov strani. Ostanali bodo na svojih mestih, čeprav jih lahko blokira relativno pozicionirani blok. Sama lastnost se redko uporablja. Običajno se uporablja v kombinaciji z naslednjo možnostjo.

Absolutno pozicioniranje

Ena izmed najbolj zanimivih in najpogosteje uporabljenih možnosti. Pri uporabi lastnosti Positionz vrednostjo absolutno Položaj komponente strani se izračuna glede na okno brskalnika. Drugo Elementi (ki niso popolnoma pozicionirani) se zdijo "pozabili" na obstoj "kolega" s položajem: absolutno in zavzame mesto v toku. Zdi se, da je vse popolnoma enako kot pri položaju: fiksni, Vendar pa obstajajo tudi resne razlike.

Prvič, položaj elementa je mogoče prosto krmiliti - uporablja lastnosti zgoraj / desno / spodaj / levo. Če na primer navedete vrednost spodaj: 100px, blok "potisne" od dna strani do 100 slikovnih pik. Drugič, ko se pomikate, bo "absolutna" komponenta ostala na svojem mestu, namesto da se premika s stranjo.

Interakcija absolutnih blokov s starševskimi elementi

Še natančnejši nadzor nad absolutno postavljenim komponentom lahko dosežete. Če želite to narediti, morate svojo staršo nastaviti na lastnost Position: fiksna, relativna ali absolutno.

Poglejmo si primer. Ali imaš div z razredom relativno-div, znotraj katere se nahaja div z razredom absolutno-div. Nastavite lastnost Pozicija na notranji blok: absolutno. Takoj "leti" iz toka in je nekje zgoraj, ker je zdaj njegova lokacija izračunana glede na okno brskalnika. Zdaj smo dali blok z razredom relativno-div Lastnost lastnosti: relativni in "prodorni sin" se vrne na njegovo mesto. Skoraj. Pravzaprav se prikaže v zgornjem levem kotu nadrejenega elementa.

Zakaj se to dogaja? Bistvo je v specifičnosti lastnosti Position: absolutno. Privzeto je njegov položaj odvisen od okna brskalnika, če pa je tudi "starš" nameščen nekako drug kot statično, Položaj začne biti odvisen od nadrejenega elementa. To je zelo priročno, saj lahko komponento postavite kjerkoli, ne da bi izračunali ogromne številke glede na okno brskalnika. Sprejem se pogosto uporablja za postavitev ikon, gumbov in drugih majhnih predmetov.

Postavite CSS v središču

Ena glavnih težav za začetnike je, da središče elementa navpično in vodoravno. Pravilno uporabite lastnost položaja, da bi bilo enostavno. CSS Položaj: absolutno v središču je nastavljen na naslednji način. Recimo, da imate div z razredom absolutno-div, ki je v razredu "diva" relativno-div. "Parent" je relativno nameščen in njegova širina je enaka širini celotne strani. "Otrok" 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 komponento na vrhu: 50% in levo: 50%. Skoraj končano! Absolutni div se je preselil iz mesta in je bil skoraj v središču, vendar ne čisto. Sredina "staršev" se dotika roba, zato moramo središče "potomstva" biti v središču bloka. Za to ga morate vprašati margin-levo in desno z vrednostmi -200 px. Na ta način bomo premaknili absolutno pozicionirani blok na polovico svoje višine in širine. Vse je v središču!

Komponente, ki se prekrivajo

Problem je lahko težko, na prvi pogled, "prekrivati" postavljene elemente na svojih "sosedih". Na primer, komponenta s položajem: fiksno se bo prekrivalo vse, kar se nahaja na strani. Če želite popraviti situacijo, je mogoče s pomočjo premoženja z-indeks, vendar ne pozabite, da deluje samo za postavljene elemente. Skladno s tem, če želite postaviti blok na fiksno nameščeni element, bo ta blok tudi postavljen. Na primer, relativno.

Lnačin učenja pozicioniranja - upoštevajte primere Položaj CSS, preizkusite in poskusite nekaj svojega. Poskusite se naučiti, kako jo uporabljati v povezavi s funkcijo calc () - to bo omogočilo fleksibilnejšo prilagajanje lokacije. Vendar ne pozabite, da ta lastnost ni namenjena za izgradnjo celotne "mreže" strani. S svojo pomočjo boste morali premikati sorazmerno majhne elemente, sicer lahko preveč zlahka zbegnete.