Postavljanje blokova u css. Pozicioniranje sadržaja

Pozicioniranje css blokova jedna od najvažnijih faza izgleda, jer upravo to utiče na prilagodljivost sajta ili mogućnost njegove implementacije u budućnosti (ako trenutno nije potrebno), a takođe ima značajan uticaj na dalje skaliranje sajta . Nije neuobičajeno da „potencijalni layout dizajneri“ naprave takav izgled da ga je na kraju lakše baciti nego nešto promijeniti, ali u isto vrijeme može izgledati potpuno u skladu s izgledom. Ova situacija nastaje zbog nerazumijevanja gdje i kada koristiti ovaj ili onaj tip pozicioniranja. Danas ćemo pokušati razumjeti ovo pitanje. I tako, u css-u postoji svojstvo pozicija. Ovo svojstvo može imati 5 vrijednosti, ali ćemo razmotriti 4 glavne:

• apsolutno
• statički
• relativno
• fiksno

Apsolutno pozicioniranje blokova (apsolutno)

Prva metoda pozicioniranja na našoj listi je apsolutna. Kada se dodijeli ovo svojstvo, blok postaje jedinica sam za sebe i drugi elementi stranice ne utječu na njegovu lokaciju, a isto tako ne utječu na druge elemente. Veličina bloka je određena svojstvima širine i visine, a lokacija na stranici određena je gornjim svojstvima. lijevo, desno i dolje ovi parametri određuju padding od gornjeg, lijevog, desnog i donjeg ruba. Ako blok nema roditeljski element, a također ako je pozicioniranje roditeljskog elementa drugačije od statičkog, tada svojstva gornje, lijevo, donje, desno postavljaju uvlake od početka stranice, inače od rubova stranice roditeljski element.

Najčešće se ova vrsta pozicioniranja koristi kada je blok potrebno pritisnuti na desnu ili donju ivicu. Razmotrimo ovaj raspored.

Radi praktičnosti, blokovi su istaknuti okvirom u više boja. Oznaka će izgledati ovako:

XHTML

Relacija ( pozicija: relativna; ) .žuta ( pozicija: apsolutna; desno: 10px; dno: 10px; )

Relation položaj: relativan; Žuta pozicija: apsolutna; desno: 10px; dno : 10px ;

U ovom primjeru koristili smo desna i donja svojstva za postavljanje pomaka od desne i donje ivice. Ove vrijednosti svojstva su ekvivalentne vrijednostima na vrhu: visina elementa - 10px i lijevo: širina elementa - 10px.

Takođe, apsolutno pozicioniranje se ponekad koristi kada je potrebno „uticati“ jedan element na drugi.

Statičko pozicioniranje (statično)

Najčešći tip pozicioniranja koji se javlja na svakoj stranici i obično je postavljen za većinu elemenata je statički, napisan u css-u kao statički. Za većinu HTML oznaka, ova vrijednost je definirana po defaultu, tj. ako pozicija nije eksplicitno specificirana, vrijednost će biti statična. Ovim rasporedom elementi su poređani jedan ispod drugog, a koordinate u prozoru svakog elementa zavise od najbližih elemenata sa položajem: statički ili položaj: relativan. Svojstva gornje, lijevo, desno, donje neće raditi s ovim pozicioniranjem; pozicija se mijenja zbog svojstva margine.

Relativno pozicioniranje

Ovaj tip pozicioniranja je vrlo sličan statičkom pozicioniranju, osim što se pozicija elementa može mijenjati svojstvima gore, lijevo, desno, dolje i margina.

Fiksno pozicioniranje

Fiksno pozicioniranje je slično apsolutnom pozicioniranju u smislu kako se specificiraju koordinate, ali se lokacija izračunava ne u odnosu na HTML stranicu, već u odnosu na prozor pretraživača, tj. sa svojstvom top: 10px, postavit ćete gornju marginu na 10px IZ PROZORA PRETRAŽIVAČA i bez obzira na kojem se nivou pomicanja stranice nalazite, ovaj element će uvijek pratiti vaš ekran.

Obično se koristi za elemente navigacije tako da korisnik uvijek ima važne informacije ili linkove do zanimljivih stranica na vidiku.

Nekretnina pozicija ima sljedeća značenja
statički relativno apsolutno fiksno
Samo svojstva se primjenjuju zajedno s njim (osim pozicije: statički;)
top dnu u pravu lijevo
Može biti prisutan u isto vrijeme
margina transformirati float (isključujući poziciju: apsolutnu; i poziciju: fiksnu;)

Dodajte praznu oznaku ispred div sa class="primer" - .

Uvod

Elementi na web stranici zauzimaju određenu količinu prostora. Po analogiji s brodovima u igri "Battleship". Između brodova treba da postoje 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. Koristeći poziciju i svojstva, čini se da su podignuti na nivo 2.

U prirodnom redoslijedu, donje oznake u kodu su prikazane iznad gornjih oznaka. 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. Ako nema transformacije, z-indeks se ne uzima u obzir.

Relativno pozicioniranje - pozicija: relativna;

Blok kojem dodjeljujemo poziciju: relativno će imati prioritet. Sadržaj donjeg elementa je skriven.

Da bi se blok B postavio na vrh B, 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 morate postaviti z-indeks za element B da bude manji od onog za blok A.

Umjesto margine za relativno pozicioniranje, ponekad je bolje koristiti svojstva gore, dolje, desno, lijevo. Polazna tačka za njih je početni položaj elementa. U isto vrijeme, blok B nastavlja biti pozicioniran kao da je blok A na istom mjestu - ostavlja prazan prostor za njega. Stoga, ne morate raditi nikakvu magiju sa praznim div().

Potpuna analogija sa imovinom

Za inline elemente

Ugrađeni elementi margine se ne pomiču dolje ili gore (). Samo gornji, donji

ili

B A B

Apsolutno i fiksno pozicioniranje

Čini se da bi blok sa položajem: apsolutni trebao biti smješten iznad položaja: relativan, ali to nije slučaj, ovdje se primjenjuje prirodni poredak. To znači da će vam z-index omogućiti da između njih odaberete element prioriteta.

Blok B zanemaruje originalnu poziciju bloka B, jer sa položajem: apsolutnim i položajem: fiksnim, element prestaje da utiče na susedne oznake bilo kroz svoju širinu/visinu ili kroz float: levo.

Finalni sto

karakteristična svojstva	položaj: statičan;	položaj: relativan; transform: translate();	pozicija: apsolutna;	pozicija: fiksna;
preklapanje	Bolje je ne postavljati elemente jedan na drugi	elementi imaju prioritet vidljivosti nad statičkim. Ostala značenja su ekvivalentna. Biće vidljiv onaj koji je niži u kodu ili ima veću vrednost z-indeksa.
referentna tačka gore, desno, dolje i lijevo	ignorisano	početni položaj elementa	ivica roditeljskog elementa	ivica prozora pretraživača
elementi okolo	uzeti u obzir trenutnu poziciju elementa	uzeti u obzir početni položaj elementa	zanemariti poziciju elementa
širina: 100%; ovo je širina	element (za inline)/roditeljski element (za nivo bloka)		roditeljski element sa pozicijom koja nije postavljena na statičku	prozor pretraživača
prilikom pomicanja elementa stranice	potezi			"zalijepi" na određenu lokaciju u prozoru pretraživača

Sada, da biste konsolidirali materijal, kliknite na gumbe na početku članka, razmislite zašto je došlo do takvih promjena.

Posljednje ažuriranje: 28.04.2016

CSS pruža mogućnosti pozicioniranja elemenata, što znači da možemo postaviti element na određenu lokaciju na stranici.

Glavno svojstvo koje kontroliše pozicioniranje u CSS-u je svojstvo pozicije. Ovo svojstvo može imati jednu od sljedećih vrijednosti:

statički : standardno pozicioniranje elementa, zadana vrijednost

apsolutni : element je pozicioniran u odnosu na granice elementa kontejnera ako njegovo svojstvo položaja nije statičko

relativno : Element je pozicioniran u odnosu na svoju zadanu poziciju. Tipično, glavna svrha relativnog pozicioniranja nije pomicanje elementa, već uspostavljanje nove točke sidrenja za apsolutno pozicioniranje njegovih ugniježđenih elemenata.

fiksno : element je pozicioniran u odnosu na prozor pretraživača, ovo vam omogućava da kreirate fiksne elemente koji ne mijenjaju poziciju kada se pomiče

Ne biste trebali istovremeno primijeniti svojstvo float i bilo koji tip pozicioniranja osim statičkog (to jest, zadanog tipa) na element.

Apsolutno pozicioniranje

Područje za pregled pretraživača ima gornju, donju, desnu i lijevu ivicu. Svaki od ova četiri ruba ima odgovarajuće CSS svojstvo: lijevo, desno, gornje i donje. Vrijednosti za ova svojstva su navedene u pikselima, ems ili procentima. Nije potrebno postavljati vrijednosti za sve četiri strane. U pravilu se postavljaju samo dvije vrijednosti - uvlačenje od gornje ivice gornje i uvlačenje s lijeve ivice lijevo.

ZDRAVO SVIJETE

Ovdje će apsolutni pozicionirani div biti 100 piksela lijevo od granice okvira za prikaz i 50 piksela od dna.

Nije toliko važno da iza ovog div elementa postoje neki drugi elementi. Ovaj div blok će u svakom slučaju biti pozicioniran u odnosu na granice okvira za pregled pretraživača.

Ako se element s apsolutnim pozicioniranjem nalazi u drugom kontejneru, koji zauzvrat ima vrijednost svojstva položaja koja nije jednaka static , tada je element pozicioniran u odnosu na granice spremnika:

Relativno pozicioniranje

Relativno pozicioniranje je također specificirano pomoću relativne vrijednosti. Za specificiranje određene pozicije na koju se element pomiče, koriste se ista svojstva gornje, lijevo, desno, donje:

z-indeks svojstvo

Prema zadanim postavkama, kada dva elementa imaju istu granicu, element koji je zadnji definiran u html oznaci prikazuje se iznad drugog. Međutim, svojstvo z-indeks vam omogućava da promijenite redoslijed elemenata kada se preklapaju. Svojstvo uzima broj kao svoju vrijednost. Elementi sa većom vrednošću z-indeksa će se pojaviti na vrhu elemenata sa manjom vrednošću z-indeksa.

Na primjer:

Sada dodajmo novo pravilo stilu bloka redBlock:

RedBlock( z-indeks: 100; pozicija: apsolutna; vrh: 20px; lijevo:50px; širina: 80px; visina: 80px; boja pozadine: crvena; )

Ovdje je z-indeks 100. Ali to ne mora biti broj 100. Pošto drugi blok ima nedefinirani z-indeks i zapravo je nula, za redBlock možemo postaviti svojstvo z-index na bilo koju vrijednost veću od nula.

I sada će se prvi blok preklapati s drugim, a ne obrnuto, kao što je bio slučaj na početku.

Jedna od najboljih stvari kod CSS-a je to što nam stilovi daju mogućnost da pozicioniramo sadržaj i elemente na stranici na gotovo bilo koji zamisliv način. Ovo dodaje strukturu našem dizajnu i pomaže da sadržaj bude vizualniji.

Postoji nekoliko različitih tipova pozicioniranja u CSS-u, svaki od ovih tipova ima svoj opseg. U ovom poglavlju ćemo pogledati nekoliko različitih slučajeva upotrebe – kreiranje rasporeda za višekratnu upotrebu i jedinstveno pozicioniranje jednokratnih elemenata – i opisati nekoliko metoda za to.

Pozicioniranje preko float-a

Jedan od načina da se pozicioniraju elementi na stranici je preko svojstva float. Ovo svojstvo je prilično svestrano i može se koristiti na mnogo različitih načina.

U suštini, svojstvo float uzima element, uklanja ga iz normalnog toka stranice i pozicionira ga lijevo ili desno od njegovog roditeljskog elementa. Svi ostali elementi na stranici će se omotati oko takvog elementa. Na primjer, paragrafi će se omotati oko slike ako je element float svojstvo je postavljeno.

Kada se svojstvo float primeni na više elemenata odjednom, omogućava kreiranje rasporeda sa lebdećim elementima jedan pored drugog ili naspram drugog, kao što je prikazano u rasporedu sa više kolona.

Svojstvo float ima nekoliko vrijednosti, dvije najpopularnije su lijevo i desno, koje omogućavaju elementu da pluta lijevo ili desno od svog roditelja.

Img ( float: lijevo; )

plutaju u praksi

Napravimo opći izgled stranice sa zaglavljem na vrhu, dvije kolone u sredini i podnožjem na dnu. Idealno bi bilo da ova stranica bude označena elementima

,

,