također se nazivaju slojevitim, a sami blokovi su slojevi. To je zato što se pri korištenju određenih vrijednosti svojstava mogu postaviti jedan na drugi, slično slojevima u Photoshopu.
U blok rasporedu, pozicioniranje slojeva najbolje je izvesti pomoću kaskadnih stilskih listova. Glavno CSS svojstvo odgovorno za poziciju
, je plovak.
Sintaksa svojstva:
plutati: lijevo | desno | nijedan | naslijediti ,
Gdje:
lijevo - poravnava element s lijevim rubom zaslona. Ostatak elemenata omota se udesno;
desno - poravnanje s desne strane, omatanje ostatka elemenata - s lijeve strane;
nema - zamatanje nije dopušteno;
naslijediti - naslijediti vrijednost roditeljskog elementa.
Razmotrite lagani primjer pozicioniranja divova pomoću ovog svojstva:
Lijevi blok
desni blok
Sada pokušajmo upotrijebiti isto svojstvo za postavljanje trećeg diva u središte stranice. Ali, nažalost, float nema središnju vrijednost. A kada se novom bloku dodijeli vrijednost poravnanja udesno ili ulijevo, on se pomiče u navedenom smjeru. Stoga ostaje samo postaviti sva tri bloka na plutajući: lijevo:
Ali ni ovo nije najbolja opcija. Kada se prozor smanji, svi slojevi se poredaju u jedan red okomito, a kada se veličina poveća, lijepe se za lijevi rub prozora. Dakle, trebamo bolji način za centriranje divova.
Centriranje slojeva
U sljedećem primjeru koristit ćemo sloj kontejnera za postavljanje ostalih elemenata. Time se rješava problem pomicanja blokova jedan u odnosu na drugi kada se promijeni veličina prozora. Centriranje spremnika u sredini vrši se postavljanjem svojstava margine na nulu za margine odozgo i auto sa strane (margina: 0 auto ):
Lijevi blok
središnji blok
desni blok
Ovaj isti primjer pokazuje kako možete centrirati div vodoravno. A ako malo uredite gornji kod, možete postići okomito poravnanje blokova. Da biste to učinili, samo trebate promijeniti duljinu sloja spremnika (smanjiti ga). Odnosno, nakon uređivanja svog css-a, klasa bi trebala izgledati ovako:
Nakon promjene, svi blokovi će se poredati strogo u nizu u sredini. Njihov se položaj neće promijeniti ni u jednoj veličini prozora preglednika. Ovako izgleda div centriran okomito:
U sljedećem primjeru koristili smo niz novih css svojstava za centriranje slojeva unutar spremnika:
Kratak opis css svojstava i njihovih vrijednosti koje smo koristili u ovom primjeru da centriramo div unutar diva:
display: inline-block - postrojava blok element u liniju i omota ga drugim elementom;
vertikalno poravnanje: sredina - poravnava element u sredini u odnosu na roditelj;
margin-left - postavlja marginu lijevo.
Kako napraviti vezu iz sloja
Koliko god čudno zvučalo, moguće je. Ponekad može biti potreban div blok kao poveznica pri postavljanju različitih vrsta izbornika. Razmotrimo praktični primjer implementacije sloja veze:
Link na našu stranicu
U ovom primjeru, koristeći prikaz linije: block , postavljamo vezu na vrijednost elementa bloka. A da bi cijela visina diva postala veza, postavite visinu: 100%.
Skrivanje i prikazivanje blok elemenata
Blok elementi pružaju više mogućnosti za proširenje funkcionalnosti sučelja od zastarjelog tabelarnog izgleda. Često se događa da je dizajn stranice jedinstven i prepoznatljiv. Ali morate platiti za takav ekskluzivni nedostatak slobodnog prostora.
To se posebno odnosi na glavnu stranicu, cijena oglašavanja na kojoj je najveća. Stoga nastaje problem gdje "ugurati" još jedan reklamni banner. I ovdje se ne možete izvući s poravnavanjem diva sa središtem stranice!
Racionalnije rješenje je da neki blok bude skriven. Evo jednostavnog primjera takve implementacije:
Ovo je čarobni gumb. Klikom na njega će se sakriti ili prikazati skriveni blok.
Od autora: pozdrav. Pozicioniranje css elemenata vrlo je važna tema u izgradnji web stranice. U ovom članku predlažem da ga detaljnije razmotrimo, sve načine pomicanja blokova po web stranici.
Koje su vrste Ako govorimo o pozicioniranju blok elemenata, onda se postavlja pomoću svojstva položaja. Ima četiri značenja i svako zaslužuje zasebno razmatranje.
Apsolutno pozicioniranje Ovo je prva poznata vrsta. Postavlja se ovako: pozicija: apsolutna. Nakon toga blok gubi svoja uobičajena svojstva i potpuno ispada iz normalnog toka. Što je ovo stream? Pokušajte staviti nekoliko elemenata na razini bloka u nizu u oznaci. Kako će oni postati? Jedan za drugim, i ništa više.
Ovo je uobičajeno ponašanje blokova prema zadanim postavkama. Ali što se događa s blokom koji ima definirano apsolutno pozicioniranje? Potpuno ispada iz normalnog toka, drugi blokovi to jednostavno prestaju primjećivati, kao da nikad nije postojao, ali element ostaje na stranici. Apsolutno pozicioniranje u css-u često se koristi za točno pozicioniranje ukrasnih elemenata, ikona i drugih dodataka.
Sada se može pomicati koristeći svojstva lijevo, desno, gornje i donje. Prema zadanim postavkama, pomicanje se događa u odnosu na rubove prozora preglednika, ali ako je roditeljski element postavljen na položaj: relativan, tada se pomak događa u odnosu na roditeljski blok.
Blok (položaj: apsolutni; dolje: 0; desno: 0; )
Blok (
pozicija : apsolutna ;
dolje: 0
desno: 0
Element će se premjestiti u donji desni kut. Primjećujem da često tako rade gornji gumb - samo ga stave apsolutno u sam kut. A evo još jednog primjera gdje ću najprije pokazati moguće oznake:
<
div
id
=
"wrapper"
>
<
div
class
=
"block"
>
<
/
div
>
<
/
div
>
A sada css stilovi za ovaj isječak:
#wrapper( pozicija: relativna; ) .block( pozicija: apsolutna; vrh: 0; desno: 10px; )
#omot(
položaj : relativan ;
Blok (
pozicija : apsolutna ;
vrh : 0 ;
desno: 10px;
U ovom primjeru prvo smo zabilježili relativni položaj roditeljskog spremnika (relativno - više o tome kasnije u članku), a zatim postavili apsolutni položaj za isti .block element. Kao rezultat toga, koordinate će se brojati ne iz samog prozora preglednika, već s rubova roditeljskog elementa, odnosno bloka omotača.
Relativno pozicioniranje css elemenata Ovo je sljedeći pogled i piše se ovako - pozicija: relativna. Koordinate su određene istim svojstvima kao u apsolutnom položaju. Jedina značajna razlika je u tome što element formalno ne ispada iz toka – za njega ima mjesta.
Djelovanje ove vrijednosti može se usporediti s vidljivošću: skriveno, kada je element skriven sa stranice, ali mjesto ispod njega ostaje netaknuto. Isto se događa i s relativnim postavljanjem - blok se može premjestiti bilo gdje, ali mjesto ispod njega ostaje prazno i neće ga zauzeti drugi dijelovi.
Također je važno znati da pomak ne dolazi s rubova prozora web preglednika, već s mjesta gdje je blok izvorno stajao. tj.:
Blok (položaj: relativan; vrh: 10px; desno: 50px; )
Blok (
položaj : relativan ;
vrh: 10px;
desno: 50px
Blok će se pomaknuti 50 piksela udesno i 10 piksela ulijevo.
Fiksiranje Sigurno ste na internetu više puta vidjeli na stranicama kada, prilikom pomicanja, banner nije nestao, već je nastavio biti u vašoj zoni vidljivosti, kao da se drži na jednom mjestu. To se uglavnom provodi pomoću fiksnog pozicioniranja. Da biste to učinili, trebate napisati:
Položaj: statički ili redoviti statički položaj Posljednji pogled je statičan, što je normalno ponašanje elemenata na razini bloka. Ne treba ga napisati, jer je zadana, ali morate znati za četvrtu vrijednost. Ponekad je položaj: statički napisan kako bi nadjačao drugu vrstu pozicioniranja na određenim događajima na web stranici.
Kako ispravno postaviti blok u css? Razmotrili smo značenja, ali to nije dovoljno da zatvorimo ovu temu za sebe. Zapravo, morate razumjeti gdje i koje vrste pozicioniranja trebate primijeniti. S fiksnim, već sam vam dao primjer - može se koristiti za stvaranje ljepljivih bočnih traka, zaglavlja ili podnožja.
Relativno pozicioniranje je korisno kada trebate malo pomaknuti blok u odnosu na njegov položaj i dalje ga držati u toku. Također je postavljeno na roditeljske blokove za korištenje apsolutnog kretanja za podređene elemente.
Ostale tehnike: centriranje, plutajući blokovi Svojstvo položaja ne rješava sve probleme s postavljanjem blok elemenata. Kako biste, na primjer, stvorili mrežu web-mjesta s njom? Nemam dobrih ideja. Ovdje dobro dolaze druge značajke.
Uz pomoć float u css-u često se izrađuju mreže. Svojstvo vam omogućuje da gurnete blok na lijevi ili desni rub roditelja (float: lijevo, float: desno), dopuštajući da nekoliko elemenata bloka postanu u jednom redu, što se vrlo često događa na bilo kojem mjestu.
Centriranje se radi ovako: blok treba upisati određenu širinu, a zatim postaviti marginu: 0 auto svojstvo. To je automatska vrijednost koja će je vodoravno poravnati točno u sredini. Naravno, za to mora biti jedini u svojoj liniji, inače ništa neće raditi.
Sve vrste pozicioniranja navedene u ovom članku mogu biti korisne web programeru. Negdje treba umetnuti ikonu (položaj: apsolutni), negdje malo korigirati položaj bloka, ostavljajući mjesto iza njega (pozicija: relativna), a gdje widget treba biti fiksiran (pozicija: fiksna). Općenito, poznavanje ove imovine definitivno neće biti suvišno.
Pa, kako biste naučili još više iz svijeta izrade web stranica, svakako se pretplatite na naš blog i nabavite nove materijale za obuku. A savjetujem vam i da pogledate naš, gdje se također pokreće slična tema. (elementi za pozicioniranje)
Vlasništvo položaj ima sljedeća značenja
Dodajte praznu oznaku ispred div s class="primer" - .
Uvod Elementi na web stranici zauzimaju određenu količinu prostora. Po analogiji s čamcima u igri "Battleship". Između brodova trebaju biti prazne ćelije - margina.
Da biste postavili jedan element na drugi, morate postaviti negativnu vrijednost za marginu. Ali tada će se sadržaji oznaka međusobno preklapati. Uz pomoć položaja i svojstava, oni se nekako penju na razinu 2.
Prirodnim redoslijedom, donje oznake u kodu prikazane su iznad gornjih. Zahvaljujući z-indeksu na razini 2, vidljivi element možete odrediti sami.
Statičko pozicioniranje - položaj: statičan; položaj: statički je zadana vrijednost i nadjačava relativni, apsolutni i fiksni. Vrijednosti svojstava top, bottom, right, left se zanemaruju. U nedostatku transformacije, ni z-indeks se ne uzima u obzir.
Relativno pozicioniranje - položaj: relativan; Blok kojem dodjeljujemo položaj: relativno će imati prioritet. Sadržaj donjeg elementa je skriven.
Da bi se blok B smjestio na vrh C, ali ispod A, nije dovoljno dodijeliti položaj: u odnosu na njega, budući da je u kodu ispod bloka A, što znači da će ga preklapati.
Također morate postaviti z-indeks za element B da bude manji od onog za blok A.
Umjesto margine u relativnom pozicioniranju, ponekad je bolje koristiti svojstva gornje, donje, desno, lijevo. Polazna točka za njih je početni položaj elementa. Istovremeno, blok B nastavlja biti smješten kao da je blok A na istom mjestu - ostavlja prazan prostor za njega. Stoga ne možete dočarati s praznim div ().
Potpuna analogija s nekretninom
Za inline elemente Ugrađeni elementi margine ne pomiču se gore-dolje (). Samo vrh, dno
B ALI B
ili
B ALI B
B A B
Apsolutno i fiksno pozicioniranje Čini se da bi blok s položajem: apsolutni trebao biti iznad položaja: relativan, ali to nije slučaj, ovdje vrijedi prirodni poredak. To znači da će z-indeks omogućiti odabir prioritetnog elementa između njih.
Blok C zanemaruje početni položaj bloka B, jer s položajem: apsolutnim i položajem: fiksnim, element prestaje utjecati na susjedne oznake bilo kroz svoju širinu/visinu ili float: lijevo.
Finalni stol karakteristična svojstva položaj: statičan; položaj: relativan; pozicija: apsolutna; položaj: fiksni;
preklapanje elementi se ne smiju postavljati jedan na drugi elementi imaju prednost nad vidljivošću nad statičkim. Ostale vrijednosti su ekvivalentne. Onaj tko je ispod u kodu bit će vidljiv ili ima veliku vrijednost z-indeksa
referentna točka gore, desno, dolje i lijevo ignorirao početni položaj elementa rub roditeljskog elementa rub prozora preglednika
elementi okolo uzeti u obzir trenutni položaj elementa uzeti u obzir početni položaj elementa zanemariti položaj elementa
širina: 100% je širina element (za inline)/roditeljski element (za blok) roditeljski element s položajem koji nije postavljen na statički prozor preglednika
na elementu za pomicanje stranice potezima "zalijepi" na navedeno mjesto u prozoru preglednika
A sada, da biste konsolidirali materijal, kliknite na gumbe na početku članka, razmislite zašto je došlo do takvih promjena.
Web programeri ovih dana mogu izgraditi složene izglede web stranica koristeći različite CSS tehnike. Neke od ovih tehnika imaju dugu povijest (floats), druge (flexbox) su stekle popularnost posljednjih godina.
U ovom članku pobliže ćemo pogledati neke malo poznate stvari o CSS pozicioniranju.
Prije nego što počnemo, ukratko pregledajmo osnove različitih vrsta pozicioniranja.
Pregled dostupnih metoda pozicioniranja CSS svojstvo položaja definira tip pozicioniranja elementa.
Opcije pozicioniranja statički je zadana vrijednost svojstva pozicioniranja. Izvještavamo da ovaj element ne koristi pozicioniranje - pozicioniranje se primjenjuje samo ako navedete vrstu pozicioniranja koja nije zadana.
Da biste to učinili, postavite svojstvo položaja na jednu od sljedećih vrijednosti:
srodnika apsolutna fiksno ljepljiv
I tek nakon postavljanja pozicioniranja, možete koristiti svojstva koja pomiču element:
pravo dno Početna vrijednost ovih svojstava je auto ključna riječ.
Imajte na umu da ako element ima svojstvo položaja postavljeno na apsolutno ili fiksno, onda je to apsolutno pozicioniran element. Također, za pozicionirane elemente počinje raditi svojstvo z-indeksa, koje određuje redoslijed slaganja.
Razlike između glavnih metoda pozicioniranja Pogledajmo sada na brzinu tri osnovne razlike između dostupnih vrsta pozicioniranja:
apsolutno (apsolutno) pozicionirani elementi potpuno su uklonjeni iz toka, njihovo mjesto zauzimaju najbliži susjedi. relativno pozicionirani (relativni) i ljepljivi (ljepljivi) zadržavaju svoje mjesto u potoku i njihovi najbliži susjedi ga ne zauzimaju. Međutim, padding ovih elemenata ne zauzima prostor, već ga drugi elementi potpuno zanemaruju, a to može dovesti do preklapanja elemenata. fiksni elementi (a fiksno pozicioniranje je vrsta apsolutnog pozicioniranja) uvijek su pozicionirani u odnosu na okvir za prikaz (zanemarujući pozicioniranje predaka), dok se ljepljivi elementi pozicioniraju u odnosu na najbližeg pretka pomicanjem (overflow:auto). I samo u nedostatku takvih predaka oni se postavljaju u odnosu na zonu vidljivosti.
Ovo možete detaljnije vidjeti u demou:
Napomena: Pozicioniranje "ljepljivih elemenata" i dalje je eksperimentalna tehnologija s ograničenom podrškom preglednika. Naravno, ako želite, možete koristiti polifill za dodavanje ove funkcionalnosti pregledniku, ali s obzirom na nisku rasprostranjenost ovog svojstva, ovaj članak se neće raspravljati.
Elementi za pozicioniranje s tipom apsolutnog položaja Siguran sam da većina vas zna kako funkcionira apsolutno pozicioniranje. Međutim, za početnike mnoge stvari u njemu mogu zbuniti.
Stoga sam odlučio krenuti s njim u opisu malo poznatih značajki pozicioniranja.
Dakle, apsolutno pozicionirani element je pomaknut od svog najbližeg pozicioniranog pretka. Naravno, ovo funkcionira ako bilo koji od predaka ima položaj koji nije statičan - ako element nema pozicioniranih pretka, on je pomaknut od opsega.
To dokazuje sljedeći primjer:
U ovom demonstraciji, zeleni okvir je početno pozicioniran apsolutno s nultim paddingom bottom:0 i left:0 , njegov predak (crveni okvir) uopće nije bio pozicioniran.
Međutim, relativno smo pozicionirali vanjski omot (element s klasom jumbotron). Obratite pažnju na to kako se položaj zelenog bloka mijenja kada se promijeni tip pozicioniranja njegovih predaka.
Apsolutno pozicionirani elementi zanemaruju svojstvo float Ako primijenimo apsolutno ili fiksno pozicioniranje na plutajući element, svojstvo float bit će postavljeno na ništa. S druge strane, ako postavimo relativno pozicioniranje, element će ostati plutajući.
Pogledajte povezani demo:
U ovom primjeru definiramo dva različita elementa koji lebde udesno. Imajte na umu da kada crveni okvir postane apsolutno pozicioniran, zanemaruje vrijednost svojstva float, dok relativno pozicionirani zeleni okvir zadržava vrijednost float.
Apsolutno pozicionirani inline elementi postaju blok elementi Inline element s apsolutnim ili fiksnim pozicioniranjem poprima svojstva blok elementa. Pretvorba inline elemenata u blok elemente detaljnije je opisana u tablici.
U ovom slučaju stvorili smo dva različita elementa. Prvi (zeleni blok) je blok element, a drugi (crveni blok) je inline element. U početku je vidljiv samo zeleni blok.
Crveni okvir nije vidljiv jer mu postavljena svojstva širine i visine rade samo s elementima na razini bloka i inline-bloka, a budući da nema sadržaja, nema nikakve dimenzije.
Kada crvenom okviru date apsolutni ili fiksni položaj, on postaje blokovski i veličine bloka navedene u njemu stupaju na snagu.
Apsolutno pozicionirani elementi nemaju padding kolaps Prema zadanim postavkama, kada se dvije okomite margine dodiruju, one se spajaju u jednu jednaku najvećoj od njih. To se zove kolaps marže.
Ponašanje apsolutno pozicioniranih elemenata ovdje je slično plutajućim elementima - njihov padding nije spojen sa svojim susjedima.
U ovoj demonstraciji, element ima padding od 20px. Njegov padding se skuplja s paddingom roditeljskog elementa, također 20px. Kao što vidite, samo apsolutno pozicioniranje se ne urušava.
Ali kako možemo spriječiti padding od kolapsa? Moramo staviti neki separator između njih.
To može biti padding ili obrub, a može se primijeniti i na roditeljske i podređene elemente. Druga mogućnost je dodavanje clearfixa roditeljskom elementu.
Pozicioniranje elemenata s pikselima i postocima Jeste li ikada koristili postotke umjesto piksela za pozicioniranje elemenata? Ako je odgovor potvrdan, onda znate da pomak elementa ovisi o odabranim jedinicama (pikseli ili postoci).
Malo je neugodno, zar ne? Pa prvo da vidimo što specifikacija kaže o postotnom pomaku:
Pomak kao postotak širine (za lijevo i desno) ili visine (vrh ili dolje) roditeljskog okvira. Za lijepljene elemente, pomak se izračunava kao postotak širine (za lijevo i desno) ili visine (vrh ili dolje) toka. Negativne vrijednosti su dopuštene.
Kao što je spomenuto, prilikom postavljanja pomaka kao postotka, položaj elementa ovisi o širini i visini njegovog roditelja.
Demo pokazuje ovu razliku:
Ovaj primjer koristi piksele i postotke za pomak. Naravno, kada se specificira pomak u pikselima, element se pomiče tamo gdje treba biti.
A ako odaberemo postotke za pomak, rezultat će ovisiti o veličini nadređenog elementa. Ovdje je vizualizacija koja pokazuje kako se izračunava nova pozicija:
Napomena: kao što vjerojatno znate, svojstvo transformacije (zajedno s raznim funkcijama prevođenja) također vam omogućuje promjenu položaja elementa. Ali u ovom slučaju, kada se koriste postoci, izračun će se temeljiti na veličini samog elementa, a ne njegovog roditelja.
Zaključak Nadam se da vam je ovaj članak pomogao bolje razumjeti pozicioniranje u CSS-u i razjasnio glavne probleme.
