nazivaju se i sloj po sloj, a sami blokovi su slojevi. To je zato što kada se koriste određene vrijednosti svojstava, one se mogu naslagati jedna na drugu, poput slojeva u Photoshopu.
U blok rasporedu, pozicioniranje slojeva je najbolje uraditi pomoću kaskadnih stilova. Glavno CSS svojstvo odgovorno za pozicioniranje
, je plutajući.
Sintaksa svojstva:
float: lijevo | desno | nijedan | nasljediti ,
gdje:
lijevo - poravnava element s lijeve strane ekrana. Protok oko ostalih elemenata odvija se na desnoj strani;
desno - poravnanje udesno, tok oko ostalih elemenata - lijevo;
nema - nije dozvoljeno omotavanje;
naslijediti - naslijediti vrijednost roditeljskog elementa.
Pogledajmo lagani primjer pozicioniranja divova koristeći ovo svojstvo:
Lijevi blok
Desni blok
Pokušajmo sada koristiti isto svojstvo da pozicioniramo treći div u centar stranice. Ali, nažalost, float nema središnju vrijednost. A kada postavite novi blok na vrijednost poravnanja udesno ili ulijevo, on se pomiče u određenom smjeru. Stoga ostaje samo postaviti float: lijevo na sva tri bloka:
Ali ni ovo nije najbolja opcija. Kada se prozor smanji, svi slojevi su poređani u jedan red okomito, a kada se poveća veličina, lijepe se za lijevu ivicu prozora. Stoga je potreban bolji način za centriranje diva.
Centrirajući slojevi
U sljedećem primjeru koristit ćemo sloj kontejnera u koji ćemo smjestiti ostale elemente. Ovo rješava problem pomicanja blokova jedan u odnosu na drugi kada se promijeni veličina prozora. Centriranje kontejnera u sredini se vrši postavljanjem svojstava margine na nulu za gornju marginu i auto sa strane (margina: 0 auto):
Lijevi blok
Centralni blok
Desni blok
Ovaj isti primjer pokazuje kako možete centrirati div horizontalno. A ako malo uredite gornji kod, možete postići vertikalno poravnanje blokova. Da biste to učinili, samo trebate promijeniti dužinu sloja kontejnera (smanjiti ga). Odnosno, nakon uređivanja svog css-a, klasa bi trebala izgledati ovako:
Nakon promjene, svi blokovi će biti poređani striktno u nizu u sredini. Njihova pozicija se neće promijeniti ni u jednoj veličini prozora pretraživača. Ovako izgleda vertikalno centriranje diva:
U sljedećem primjeru koristili smo niz novih css svojstava da centriramo slojeve unutar kontejnera:
Kratak opis css svojstava i njihovih vrijednosti koje smo koristili u ovom primjeru da centriramo div unutar diva:
display: inline-block - Poravnava blok element sa linijom i osigurava da je omotan oko drugog elementa.
vertikalno poravnanje: sredina - poravnava element u sredini u odnosu na roditelj;
margin-left - postavlja marginu na lijevo.
Kako napraviti link od sloja
Čudno zvuči, ali ovo je moguće. Ponekad div blok kao veza može biti potreban kada se postavljaju različite vrste menija. Pogledajmo praktičan primjer implementacije sloja veze:
Link na našu stranicu
U ovom primjeru, koristeći line display: block, postavljamo vezu na vrijednost elementa bloka. A da bi cijela visina div bloka postala veza, postavite visinu: 100%.
Skrivanje i prikazivanje blok elemenata
Blok elementi pružaju više opcija za proširenje funkcionalnosti sučelja nego zastarjeli izgled tablice. Često se dešava da je dizajn web stranice jedinstven i prepoznatljiv. Ali za takvu ekskluzivu morate platiti nedostatkom slobodnog prostora.
Ovo se posebno odnosi na početnu stranicu, koja ima najveću cijenu postavljanja oglasa. Stoga postoji problem gdje "gurnuti" još jedan reklamni baner. Poravnavanje diva sa središtem stranice nije dovoljno!
Racionalnije rješenje je da neki blok bude skriven. Evo jednostavnog primjera takve implementacije:
Ovo je magično dugme. Klikom na njega će se sakriti ili prikazati skriveni blok.
Od autora: Pozdrav. Pozicioniranje css elemenata je veoma važna tema u izgradnji sajta. 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 ono postavlja pomoću svojstva položaja. Ima četiri značenja i svako zaslužuje posebno 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. Šta je ovo stream? Pokušajte staviti nekoliko blok elemenata u nizu u označavanju. Kako će oni postati? Jedan za drugim, a ne drugačije.
Ovo je normalno zadano ponašanje blokova. Ali šta se dešava sa blokom koji ima definisano apsolutno pozicioniranje? Potpuno ispada iz normalnog toka, drugi blokovi jednostavno prestaju da ga primećuju, kao da nikada nije postojao, ali element ostaje na stranici. Apsolutno pozicioniranje u css-u se često koristi za precizno postavljanje dekorativnih elemenata, ikona i drugih dizajnerskih stvari.
Sada se može pomicati koristeći svojstva lijevo, desno, gornje i donje. Podrazumevano, pomeranje se dešava u odnosu na ivice prozora pretraživača, ali ako roditeljski element ima položaj: relativan, onda se pomak javlja u odnosu na roditeljski blok.
Blok (pozicija: apsolutna; donja: 0; desno: 0;)
Blokiraj (
pozicija: apsolutna;
dno: 0;
desno: 0;
Element će biti pomaknut u donji desni ugao. Primjećujem da se gornje dugme često radi na ovaj način - samo ga postavljaju apsolutno u sam ugao. Evo još jednog primjera, u kojem vam prvo pokazujem 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;)
#wrapper (
položaj: relativan;
Blokiraj (
pozicija: apsolutna;
vrh: 0;
desno: 10px;
U ovom primjeru, prvo smo zapisali relativno pozicioniranje na roditeljski kontejner (relativno - o tome kasnije u članku), a zatim postavili apsolutno pozicioniranje za isti .block element. Kao rezultat toga, koordinate će se brojati ne iz samog prozora pretraživača, već od ivica roditeljskog elementa, odnosno bloka omotača.
Relativno pozicioniranje css elemenata Ovo je sljedeći pogled i piše se ovako - pozicija: relativna. Koordinate se postavljaju sa istim svojstvima kao i za apsolutnu poziciju. Jedina značajna razlika je u tome što element formalno ne ispada iz toka - za njega ima mjesta.
Ova vrijednost funkcionira kao vidljivost: hidden, kada je element skriven sa stranice, ali je prostor ispod njega ostavljen netaknut. Isto se dešava i sa relativnim postavljanjem - blok se može pomeriti bilo gde, ali prostor za njega ostaje prazan i drugi delovi ga neće uzeti.
Takođe je važno znati da se pomak ne dešava od ivica prozora veb pretraživača, već od mesta gde je blok prvobitno stajao. To je:
Blok (pozicija: relativna; gore: 10px; desno: 50px;)
Blokiraj (
položaj: relativan;
vrh: 10px;
desno: 50px;
Blok će se pomjeriti 50 piksela udesno i 10 piksela ulijevo.
Fiksacija Sigurno ste na Internetu više puta vidjeli na stranicama kada prilikom skrolovanja neki baner nije nestao, već je nastavio biti u vašoj zoni vidljivosti, kao da se drži na jednom mjestu. Ovo se uglavnom radi pomoću fiksnog pozicioniranja. Da biste to učinili, trebate napisati:
Položaj: statičan ili normalan statički položaj Posljednja vrsta je statična, ovo je uobičajeno ponašanje blok elemenata. Ne treba je pisati, jer je podrazumevano, ali još uvek morate znati za četvrtu vrednost. Ponekad se piše sa position: static da se poništi drugačija vrsta pozicioniranja na određenim događajima na web stranici.
Kako da pravilno pozicioniram blokove u css? Razmotrili smo značenja, ali to nije dovoljno da zatvorimo ovu temu za sebe. Zapravo, morate razumjeti gdje i koje vrste pozicioniranja treba primijeniti. Već sam vam dao primjer sa fiksnim - možete ga koristiti za kreiranje ljepljivih bočnih traka, zaglavlja ili podnožja.
Relativno pozicioniranje može pomoći kada trebate pomjeriti blok malo u odnosu na njegovu poziciju i dalje ga držati u toku. Također je postavljeno na roditeljske blokove za korištenje apsolutnog kretanja za djecu.
Ostali trikovi: centriranje, plutajući blokovi Svojstvo položaja ne rješava sve probleme s rasporedom blok elemenata. Kako biste, na primjer, kreirali mrežu web mjesta koristeći je? Nemam dobrih ideja. Ovdje u pomoć priskaču i druge nekretnine.
Mreže se često prave pomoću float-a u css-u. Svojstvo vam omogućava da gurnete blok na lijevu ili desnu ivicu nadređenog (float: lijevo, float: desno), dopuštajući da nekoliko elemenata bloka postanu u jednom redu, što je uobičajeno na bilo kojoj lokaciji.
Centriranje se radi ovako: blok treba upisati određenu širinu, a zatim postaviti marginu svojstva: 0 na auto. To je automatska vrijednost koja će je poravnati vodoravno tačno do centra. 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 za web programere. Negdje treba umetnuti ikonicu (pozicija: apsolutna), negdje malo podesiti poziciju bloka, ostavljajući mjesto iza nje (pozicija: relativna), a gdje widget fiksirati (pozicija: fiksna). Općenito, poznavanje ove imovine definitivno neće biti suvišno.
Pa, da biste naučili još više iz svijeta izrade web stranica, svakako se pretplatite na naš blog i primajte nove materijale za obuku. A savjetujem vam da pogledate i našu, gdje se također pokreće slična tema. (pozicioniranje predmeta)
Nekretnina pozicija ima sljedeća značenja
Dodajte praznu oznaku ispred div sa class = "primer" -.
Uvod Elementi na web stranici zauzimaju određeni prostor. Po analogiji s brodovima u igrici "Sea Battle". Između brodova treba da budu prazne kutije - margine.
Da biste postavili jedan element na drugi, morate postaviti negativnu vrijednost za marginu. Ali tada će se sadržaj oznaka preklapati. Uz pomoć svojstava pozicije i oni su nekako podignuti na nivo 2.
Prirodnim redoslijedom, donje oznake su prikazane iznad gornjih oznaka u kodu. Zahvaljujući z-indeksu na nivou 2, možete sami definirati vidljivi element.
Statičko pozicioniranje - položaj: statičan; pozicija: statički je zadana vrijednost i nadjačava relativnu, apsolutnu i fiksnu. Vrijednosti svojstava top, bottom, right, left se zanemaruju. U nedostatku transformacije, z-indeks se zanemaruje.
Relativno pozicioniranje - pozicija: relativna; Blok koji dodjeljujemo poziciji: relativno će imati prioritet. Sadržaj donjeg elementa je skriven.
Da bi se blok B pozicionirao iznad C, ali ispod A, nije dovoljno dodijeliti poziciju: u odnosu na njega, jer je u kodu ispod bloka A, što znači da će ga preklapati.
Također je potrebno postaviti z-indeks za element B i manji od onog za blok A.
Umjesto margine prilikom relativnog pozicioniranja, ponekad je bolje koristiti svojstva gornje, donje, desno, lijevo. Polazna tačka za njih je početni položaj elementa. Istovremeno, blok B nastavlja da se nalazi kao da je blok A na istom mestu - ostavlja prazan prostor za njega. Stoga, ne morate dočarati sa praznim div ().
Potpuna analogija sa imovinom
Za inline elemente Inline elementi se ne pomiču gore i dolje (). Samo na vrhu, na dnu
B A B
ili
B A B
B a b
Apsolutno i fiksno pozicioniranje Čini se da bi blok sa položaj: apsolutni trebao biti viši od položaja: relativan, ali to nije slučaj, ovdje se primjenjuje prirodni poredak. To znači da će vam z-index omogućiti da odaberete prioritetni element između njih.
Blok C ignoriše originalnu poziciju bloka B, jer sa položajem: apsolutnim i položajem: fiksnim, element prestaje da utiče na susedne oznake ili kroz svoju širinu/visinu, ili kroz float: levo.
Tabela sažetka karakteristična svojstva položaj: statičan; položaj: relativan; pozicija: apsolutna; pozicija: fiksna;
superponiranje bolje je ne stavljati elemente jedan na drugi elementi imaju prednost nad statičkim. Ostale vrijednosti su iste. Vidljiv će biti onaj koji je ispod u kodu, ili ima veliki z-indeks
referentna tačka gore, desno, dolje i lijevo ignorisano prvobitni položaj elementa ivica roditeljskog elementa ivica prozora pretraživača
elementi okolo uzeti u obzir trenutnu poziciju elementa uzeti u obzir prvobitni položaj elementa zanemariti poziciju elementa
širina: 100%; ovo je širina element (za inline) / roditeljski element (za blok) roditeljski element s pozicijom koja nije u statičkoj vrijednosti prozori pretraživača
prilikom pomicanja elementa stranice potezi "zalijepi" na određenu lokaciju prozora pretraživača
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 istoriju (float), druge (flexbox) su stekle popularnost poslednjih godina.
U ovom članku ćemo detaljno pogledati neke od malo poznatih stvari o CSS pozicioniranju.
Prije nego počnemo, hajde da ukratko pregledamo osnove različitih tipova pozicioniranja.
Pregled dostupnih metoda pozicioniranja CSS svojstvo položaja određuje 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 postavite tip pozicioniranja koji nije zadani.
Da biste to učinili, postavite svojstvo pozicije na jednu od sljedećih vrijednosti:
relativno apsolutno fiksno lepljivo
I tek nakon postavljanja pozicioniranja, možete koristiti svojstva koja pomiču element:
u pravu dnu Početna vrijednost za ova svojstva je ključna riječ auto.
Treba imati na umu da ako element ima svojstvo položaja postavljeno na apsolutno ili fiksno, onda je to apsolutno pozicioniran element. Takođe, za pozicionirane elemente, svojstvo z-indeks počinje da radi, što određuje redosled preklapanja.
Razlike između osnovnih metoda pozicioniranja Sada, pogledajmo na brzinu tri osnovne razlike između dostupnih tipova pozicioniranja:
apsolutno pozicionirani elementi su potpuno uklonjeni iz toka, a njihovo mjesto zauzimaju njihovi najbliži susjedi. relativno pozicionirani (relativni) i zalijepljeni (ljepljivi) zadržavaju svoje mjesto u potoku, a njihovi najbliži susjedi ga ne zauzimaju. Međutim, padding ovih elemenata ne zauzima prostor, već ga drugi elementi potpuno zanemaruju, što može rezultirati preklapanjem elemenata. fiksni elementi (a fiksno pozicioniranje je neka vrsta apsolutnog) uvijek su pozicionirani u odnosu na okvir za prikaz (zanemarujući pozicioniranje pretka), dok su zalijepljeni elementi pozicionirani u odnosu na najbližeg pretka koji se pomiče (preljev: auto). I samo u nedostatku takvih predaka, oni se postavljaju u odnosu na zonu vidljivosti.
Ovo se može detaljnije vidjeti u demou:
Napomena: Pozicioniranje "elemenata ljepila" je još uvijek eksperimentalna tehnologija sa ograničenom podrškom pretraživača. Naravno, ako želite, možete koristiti polyfill da dodate ovu funkcionalnost pretraživaču, ali s obzirom na njegovu nisku rasprostranjenost, ovo svojstvo neće biti razmatrano u ovom članku.
Elementi za pozicioniranje sa apsolutnom vrstom pozicioniranja Siguran sam da većina ljudi zna kako funkcionira apsolutno pozicioniranje. Međutim, mnoge stvari o tome mogu biti zbunjujuće za početnike.
Stoga sam odlučio da počnem s tim kada opisujem malo poznate karakteristike pozicioniranja.
Dakle, apsolutno pozicionirani element je odmaknut od svog najbližeg pozicioniranog pretka. Naravno, ovo radi ako bilo koji od predaka ima poziciju koja nije statična - ako element nema pozicionirane pretke, on je pomjeren od okvira za prikaz.
To je prikazano na sljedećem primjeru:
U ovom demonstraciji, zelena kutija je inicijalno pozicionirana sa apsolutno nula margina na dnu: 0 i lijevo: 0, njegov predak (crveni okvir) uopće nije pozicioniran.
Međutim, relativno smo pozicionirali vanjski omotač (jumbotron element). Obratite pažnju na to kako se pozicioniranje zelene kutije mijenja kada se promijeni tip pozicioniranja njegovih predaka.
Apsolutno pozicionirani elementi zanemaruju svojstvo float Ako primijenimo apsolutno ili fiksno pozicioniranje na lebdeći element, svojstvo float će biti postavljeno na ništa. S druge strane, ako postavimo relativno pozicioniranje, element će ostati plutajući.
Pogledajte odgovarajući demo:
U ovom primjeru definiramo dva različita elementa koji plutaju udesno. Imajte na umu da kada crvena kutija postane apsolutno pozicionirana, ona zanemaruje float vrijednost, dok relativno pozicionirana zelena kutija zadržava float vrijednost.
Apsolutno pozicionirani inline elementi postaju na nivou bloka Inline element s apsolutnim ili fiksnim pozicioniranjem preuzima svojstva blok elementa. Za detalje o pretvaranju inline elemenata u blok elemente, pogledajte tabelu.
U ovom slučaju, kreirali 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 njegova svojstva širine i visine rade samo na blok i inline elementima, a pošto nema sadržaja, nema ni dimenzije.
Kada se crvenom bloku dodijeli apsolutno ili fiksno pozicioniranje, on postaje blok i veličine bloka navedene u njemu stupaju na snagu.
Apsolutno pozicionirani elementi nemaju skupljene margine Podrazumevano, kada se dvije vertikalne margine dodiruju, one se spajaju u jednu jednaku maksimalnom od njih. To se zove sažimanje margina.
Apsolutno pozicionirani elementi ponašaju se slično kao i plutajući elementi - njihov padding nije spojen sa susjednim.
U ovoj demonstraciji, element je postavljen na uvlačenje od 20 piksela. Njegov padding se skuplja sa paddingom roditeljskog elementa, koji takođe iznosi 20 piksela. Kao što vidite, samo sa apsolutnim pozicioniranjem ne dolazi do kolapsa.
Ali kako možemo spriječiti padding od kolapsa? Moramo staviti neku vrstu separatora između njih.
Može biti dopuna ili ivica i može se primijeniti i na roditeljske i podređene elemente. Druga opcija je dodavanje jasne popravke roditeljskom elementu.
Pozicioniranje elemenata s pikselima i procentima Jeste li ikada koristili procente umjesto piksela za pozicioniranje elemenata? Ako je odgovor potvrdan, onda znate da pomak elementa ovisi o odabranim jedinicama mjere (pikseli ili postoci).
Ovo je malo sramotno, zar ne? Dakle, prvo, hajde da vidimo šta specifikacija kaže o ofsetu u procentima:
Pomak kao postotak širine (za lijevo i desno) ili visine (gore ili dolje) roditeljskog okvira. Za lijepljene elemente, pomak se izračunava kao postotak širine (lijevo i desno) ili visine (gore ili dolje) toka. Negativne vrijednosti su dozvoljene.
Kao što je spomenuto, kada se specificira pomak kao postotak, pozicija elementa ovisi o širini i visini njegovog roditelja.
Demo pokazuje ovu razliku:
Ovaj primjer koristi piksele i procente za pomak. Naravno, kada postavite pomak u pikselima, element se pomjera tamo gdje treba.
A ako odaberemo postotak za pomak, rezultat će ovisiti o veličini nadređenog elementa. Evo vizualizacije koja pokazuje kako se izračunava nova pozicija:
Napomena: kao što verovatno znate, svojstvo transformacije (zajedno sa raznim funkcijama prevođenja) takođe vam omogućava da promenite poziciju 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 da bolje shvatite pozicioniranje CSS-a i razjasnio osnovne složenosti.
