,

,

,

. Tag
često se koristi u izgledu modernih stranica za kreiranje mreža i jednostavno znači neka vrsta bloka ili kontejnera. U njega je dozvoljeno ugniježditi druge oznake, što stoga nije moguće sa svim elementima bloka
zgodan za upotrebu. Blokovi su obično naslagani jedan na drugi i nisu ugniježđeni unutar inline elemenata. HTML inline elementi su tekst, a CSS se koristi za njegovo stiliziranje.
Uz datu širinu sadržaja, ukupna širina bloka je zbir desnog i lijevog dopuna, margina, ivica i širine. Zadata visina - od gornjeg i donjeg paddinga, margina, ivica i visine. Tekst u blok elementima je po defaultu poravnat lijevo. Ako jedan od njih sadrži inline elemente zajedno sa blok elementima, tada se anonimni blok kreira oko inline elemenata. Koristit će zadani stil. Također će naslijediti dati stil koji je dodijeljen njegovom roditelju.
Tok dokumenata
Tok se odnosi na redoslijed u kojem se elementi stranice prikazuju, određen svojstvima navedenim u CSS-u. Istovremeno, prema zadanim postavkama, blokovi su poređani odozgo prema dolje, a inline oznake, ako nema dovoljno prostora, se prenose na novi red a raspoređeni su odozgo prema dolje i slijeva nadesno. Položaj elementa na stranici zavisi od njegovog mesta u kodu: što je viši, to se ranije nalazi. Svaki od blok elemenata izgleda kao pravougaonik koji gura susjedne od sebe. Ovo ponašanje možete promijeniti pomoću posebnih svojstava. Poravnavanje u CSS-u određenih kutija sa središtem ili sa strane kontejnera naziva se pozicioniranje.
Elementi za pozicioniranje
Položaj blokova može se kontrolirati korištenjem apsolutnog i relativnog pozicioniranja. Pozicioniranje se koristi da se velikim dijelovima stranice da određeno mjesto, da se kreiraju složeni interfejsi, iskačući prozori i dekorativni elementi. Glavno svojstvo koje se koristi za pozicioniranje blokova u CSS-u je pozicija. Ima četiri glavna svojstva:
• relativna;
• apsolutni;
• fiksno;
• statički.
Uz njihovu pomoć, možete mijenjati načine izgleda postavljanjem jednog od četiri parametra: gornji, desni, donji ili lijevo. Postoji i svojstvo za naručivanje slojeva - z-index. Pozicioniranje sa statičkim svojstvom se općenito ne koristi, jer označava zadano pozicioniranje blokova. Stoga, korištenje bilo kojeg parametra ne utječe ni na koji način. Ostala tri svojstva se koriste za raspored: relativno, apsolutno, fiksno.
Relativno pozicioniranje
Relativno pozicioniranje blokova u CSS-u, odnosno položaj: relativno svojstvo, znači da se element može pomjeriti i promijeniti njegov originalni položaj. Takav blok i dalje ostaje u toku. Zapravo, nije on taj koji je raseljen, već njegova kopija. Vrijednosti svojstava su postavljene tako da točno odrede koliko će se blok pomicati u jednom ili drugom smjeru. Obično se mjere u pikselima. Ali prihvatljivo je koristiti druge jedinice.

Korištenje svojstava u relativnom pozicioniranju
Svojstvo top pomiče kopiju određenog bloka gore ili dolje za broj piksela specificiranih u svojstvu. Kada ga koristite, elementi koji se nalaze ispod ili iznad ostaju na svojim mjestima, jer se ni pomaknuti blok ne pomiče nigdje.
Donje svojstvo pomiče blok u suprotnom smjeru od svojstva vrha. Pozitivna vrijednost pomaže da se pomakne gore, a negativna vrijednost pomaže dolje. Desna i lijeva svojstva pomjeraju element udesno i lijevo, respektivno. Kombinirajući ih sve, možete postaviti točnu lokaciju bloka na stranici, pomičući ga duž vertikalne i horizontalne koordinatne osi. Ako povećate uvlake, oni će se izračunati ne od ruba samog bloka, već od njegove kopije pomaknute u stranu.

Apsolutno pozicioniranje
Apsolutno pozicioniranje kutija u CSS-u je dato apsolutnom vrijednošću svojstva pozicije. Element koji je apsolutno pozicioniran ispada iz toka dokumenta, a susjedni blokovi zauzimaju njegovo mjesto. Širina takvog elementa se rasteže ovisno o njegovom sadržaju, a može se pomicati postavljanjem određenih vrijednosti na svojstva gornje, lijevo, desno, donje. Apsolutno pozicioniranje blokova u CSS-u je korisno za naslove. Ali pozicija: apsolutna radi ne samo za blok elemente, već i za inline elemente.
Center Elements
Pozicionirani apsolutno inline element ponašat će se točno kao inline element. Stoga, uz pomoć pozicioniranja, možete kontrolirati u CSS-u i tekstu. Možete primijeniti neka nova svojstva na njega, kao što je promjena visine i širine. Centriranje i vertikalno poravnanje u CSS-u koristi kombinaciju nekoliko svojstava. Kontrolira vertikalno poravnanje gornjeg svojstva. Ako želite da centrirate okvir u CSS-u, glavni kontejner mora biti relativno pozicioniran, a element koji se poravna mora biti apsolutno pozicioniran. Kontejner bi trebao biti postavljen na vrh: 50%, a za pomicanje elementa na pola njegove visine, koristite svojstvo translate sa vrijednošću “0, -50%”. Mogu se razlikovati apsolutno pozicionirani elementi novi tip, budući da imaju svojstva koja nisu dostupna za druge tipove pozicioniranja.

Pozicioniranje u odnosu na gornji lijevi ugao pretraživača
Lijeva, gornja, desna i donja svojstva rade različito sa apsolutno i relativno pozicioniranim elementima. Za relativne elemente, ova svojstva specificiraju pomak u odnosu na mjesto na kojem se element nalazi. Apsolutno pozicionirani odvijaju se relativno određeni sistem koordinate vezane za veličinu prozora pretraživača. Polazna tačka ovog sistema su uglovi prozora. Kada koristite lijevo svojstvo, padding će se mjeriti s lijeve strane pretraživača, ali traka za pomicanje se neće pojaviti. Svojstvo top, kada je postavljeno apsolutno, postavlja padding od vrha pretraživača do vrha elementa na koji se primjenjuje. Kombinacijom oba svojstva, element se može pomjeriti u odnosu na gornji lijevi ugao pretraživača.

Pozicioniranje u odnosu na gornji desni ugao pretraživača
Slično, koristeći svojstva desno i gornje, možete zakačiti element na desnu stranu prozora pretraživača i promijeniti njegovu poziciju okomito, pomjerajući ga u gornji desni ugao. Ako je vrijednost desnog svojstva negativna, blok će biti pomjeren izvan okvira prozora. Nakon toga bi se trebala pojaviti traka za pomicanje. Za pomicanje elementa prema dolje koristite svojstvo bottom. Postavlja padding od donje ivice prozora pretraživača do dna bloka. Negativna vrijednost također uzrokuje pojavljivanje trake za pomicanje kada se element gurne iza dna prozora pretraživača.
Koordinatni sistem u apsolutnom pozicioniranju
Podrazumevano, svi elementi koji su postavljeni na apsolutnu poziciju vezani su za isti koordinatni sistem - prozor pretraživača. Ali to se može promijeniti davanjem relativne pozicije nekog roditeljskog elementa. Tada će podređeni blok promijeniti svoju lokaciju ovisno o roditelju. Ako među nadređenim elementima ima nekoliko sa relativnim pozicioniranjem, onda je odbrojavanje od najbližeg od njih. U ovom slučaju, podrazumevano pozicioniranje će biti od onoga što je postavljeno u oznaci tela.

Referentna tačka za apsolutno pozicioniran element
Prije nego što je element dobio apsolutnu poziciju, on je bio na nekom mjestu nazvanom implicitno porijeklo. Ako ne postavite svojstva za takav blok, on se neće pomjeriti. Možete ga premjestiti postavljanjem svojstva margine. Radi slično svojstvima pozicioniranja. Ako ne definirate vrijednost lijevog svojstva i svih ostalih, tada će biti jednaka auto. Također, koristeći auto, možete vratiti elemente na svoje bivšim mestima.

Fiksno pozicioniranje
Druga vrijednost je fiksna. Svojstvo pozicije sidri element na određenu lokaciju. Fiksno pozicioniranje se često koristi za kreiranje menija u CSS-u. Slično je apsolutnom, ali fiksni blok se ispušta iz toka. Čak i kada se pomiče po stranici, takav element će ostati na mjestu, pa ga je zgodno koristiti za kreiranje menija u CSS-u. Referentna tačka će tada biti usidrena za prozor pretraživača. Ako postoji nekoliko pozicioniranih blokova, svojstvo z-indeks se koristi za njihovo raspoređivanje. Može se koristiti za nadjačavanje relativnih blokova apsolutnim dajući im odgovarajući indeks, izražen kao cijeli broj. Što je veći, to će blok biti veći.
Pozicioniranje je jedno od ključni koncepti v blok raspored. Nakon što se pozabavite time, mnogo toga će vam postati jasno, a raspored će se iz šamanizma pretvoriti u smislen proces. Dakle, ovaj članak će se fokusirati na CSS svojstva. pozicija i float.
1 pozicija: statična
Podrazumevano, svi elementi na stranici su pozicionirani statički (pozicija: statički), što znači da element nije pozicioniran i pojavljuje se u dokumentu na svom uobičajenom mestu, odnosno istim redosledom kao u html oznaci.
Nema potrebe posebno dodijeliti ovo svojstvo bilo kojem elementu, osim ako ne trebate promijeniti prethodno postavljenu poziciju na zadanu.
#content( pozicija: statički; )
2.pozicija:relativna
Relativno pozicioniranje (pozicija: relativna) vam omogućava da koristite svojstva vrha, dna, lijevo i desno za pozicioniranje elementa u odnosu na mjesto gdje bi se pojavio u normalnom pozicioniranju.
Pomaknimo #content 20px dolje i 40px ulijevo:
#content( pozicija: relativna; vrh: 20px; lijevo: -40px; )

Primijetite da sada postoji prazan prostor gdje je trebao biti naš #content blok. Nakon bloka #content, blok #footer se nije pomjerio prema dolje jer #content i dalje ima svoje mjesto u dokumentu iako smo ga pomjerili.
U ovoj fazi, možda se ne čini da je relativno pozicioniranje toliko korisno, ali nemojte prenagliti sa zaključcima, kasnije u članku ćete saznati za šta se može koristiti.
3. pozicija: apsolutna
At apsolutno pozicioniranje(pozicija: apsolutna), element se uklanja iz dokumenta i pojavljuje se tamo gdje mu vi kažete.
Pomaknimo, na primjer, blok #div-1a u gornji desni ugao stranice:
#div-1a ( pozicija:apsolutna; vrh:0; desno:0; širina:200px; )

Imajte na umu da su ovaj put, pošto je blok #div-1a uklonjen iz dokumenta, preostali elementi na stranici drugačije pozicionirani: #div-1b, #div-1c i #footer su se pomaknuli na poziciju uklonjen blok. A sam blok #div-1a se nalazi tačno desno, gornji ugao stranice.
Dakle, možemo pozicionirati bilo koji element u odnosu na stranicu, ali to nije dovoljno. Zapravo, moramo pozicionirati #div-1a u odnosu na roditeljski #content blok. I u ovom trenutku, relativno pozicioniranje ponovo dolazi u igru.
4. pozicija: fiksna
Fiksno pozicioniranje (pozicija: fiksno) je podskup apsolutnog pozicioniranja. Jedina razlika je u tome što je uvijek u vidljivom dijelu ekrana i ne pomiče se dok se pomiče po stranici. U tom pogledu, to je pomalo kao fiksna pozadinska slika.
#div-1a (pozicija:fiksna; gore:0; desno:0; širina:200px; )

U IE sa pozicijom: fiksno, nije sve tako glatko kako bismo želeli, ali postoji mnogo načina zaobići ova ograničenja.
5. pozicija:relativna + pozicija:apsolutna
Dajući relativnu poziciju bloka #content (pozicija: relativna), možemo pozicionirati sve podređene elemente u odnosu na njegove granice. Postavimo #div-1a blok u gornji desni ugao bloka #content.
#content ( pozicija:relativna; ) #div-1a (pozicija:apsolutna; vrh:0; desno:0; širina:200px; )

6. Dvije kolone
Naoružani znanjem iz prethodnih koraka, možete pokušati napraviti dvije kolone koristeći relativno i apsolutno pozicioniranje.
#content ( pozicija:relativna; ) #div-1a ( pozicija:apsolutna; vrh:0; desno:0; širina:200px; ) #div-1b ( pozicija:apsolutna; vrh:0; lijevo:0; širina:200px ;)

Jedna od prednosti apsolutnog pozicioniranja je mogućnost pozicioniranja elemenata slučajni redosled, bez obzira na to kako se nalaze u markupu. U gornjem primjeru, #div-1b blok je postavljen prije #div-1a bloka.
A sada bi trebalo da imate pitanje: „Gdje su otišli ostali elementi iz našeg primjera?“. Nestali su ispod apsolutno lociranih blokova. Srećom, postoji način da se ovo popravi.
7. Dva stuba fiksne visine
Jedno rješenje je da se kontejneru u kojem se nalaze stupovi date fiksnu visinu.
#content ( pozicija:relativna; visina: 450px; ) #div-1a ( pozicija:apsolutna; vrh:0; desno:0; širina:200px; ) #div-1b ( pozicija:apsolutna; vrh:0; lijevo:0 ;width:200px; )

Rješenje nije baš prikladno, jer nikada unaprijed ne znamo koja će veličina teksta biti smještena u kolone i koji će se font koristiti.
8.Float
Za stupce promjenjive visine apsolutno pozicioniranje nije prikladno, pa pogledajmo drugu opciju.
Dodjeljujući float bloku, guramo ga što je više moguće do desne (ili lijeve) ivice, a tekst koji slijedi nakon bloka će se omotati oko njega. Obično se ova tehnika koristi za slike, ali ćemo je koristiti za više izazovan zadatak, jer je to jedini alat kojim raspolažemo.
#div-1a ( float:left; width:200px; )

9. Plutajući stupovi
Ako prvom bloku dodijelimo float: left, a zatim float: left drugom, svaki od blokova će biti pritisnut na lijevu ivicu, i dobićemo dva stupca, promjenjive visine.
#div-1a ( float:left; width:150px; ) #div-1b (float:left; width:150px; )

Također, možete dodijeliti kolone nasuprot float vrijednost, u ovom slučaju, oni će biti raspoređeni po rubovima posude.
#div-1a ( float:desno; širina:150px; ) #div-1b (float:levo; širina:150px; )

Ali sada imamo još jedan problem - kolone idu dalje od roditeljskog kontejnera, čime se razbija cijeli izgled. Ovo je najčešći problem za početnike layout dizajnera, iako se može vrlo jednostavno riješiti.
10. Čisti plovak
Čišćenje plovka može se obaviti na dva načina. Ako postoji još jedan blok iza kolona, ​​dovoljno je da mu dodijelite clear: oba.
#div-1a ( float:left; width:190px; ) #div-1b (float:left; width:190px; ) #div-1c (clear:oth; )
Ili dodijelite svojstvo overflow: hidden roditeljskom kontejneru
#content ( overflow:hidden; )
U svakom slučaju, rezultat će biti isti.

Zaključak
Danas su razmatrane samo osnovne tehnike pozicioniranja, i to najviše jednostavni primjeri. Također, da bih pomogao početnicima layout dizajnerima, uvijek preporučujem seriju članaka Ivana Sagalaeva, koji mi je svojevremeno mnogo pomogao.
15.03.2017
Ne još


Zdravo svima!
U današnjem tutorijalu pokazat ću vam kako možete postaviti element bilo gdje na ekranu koristeći pozicioniranje bloka.
Šta nam daje pozicioniranje blokova? Pozicioniranjem blokova, webmaster će moći kreirati bilo koje jedinstven dizajn sajt, postavljajući blokove gde želi. Za postavljanje blokova bilo gdje na ekranu, samo navedite koordinate.
Koordinate u CSS-u
Nekretnina "TOP» | « LIJEVO» | « PRAVO» | « BOTTOM »
Za pozicioniranje blokova moraju biti propisane koordinate, odnosno gdje će se blok postaviti.
Dijagram koordinatnog sistema:

Koordinate su određene po četiri pravila:
• top- gore;
• lijevo- lijevo;
• u pravu- desno;
• dnu- dole.
sintaksa:
Koordinata_pravila: vrijednost_koordinate;
Značenje:
Odredite vrijednost u px ili in%.
Top:100px; /* gornja ivica*/ lijevo:100px; /* lijevi rub */
Dovoljno je samo odrediti koordinate za dva ruba (gornja ili donja, lijeva ili desna).
Pozicioniranje u CSS-u

Nekretnina "POZICIJA »
Pozicioniranje je zapisano u CSS-u kroz pravilo "pozicija" sa željenom vrijednošću.
sintaksa:
Pozicija: vrijednost;
Značenje:
• apsolutno- apsolutna;
• relativno- srodnika;
• fiksno- popravljeno.
Idemo kroz svaku vrijednost.


Značenje " APSOLUTNO»
Apsolutno pozicioniranje omogućava webmasteru da postavlja blokove na web stranicu bilo gdje na ekranu. Dovoljno je upisati pravilo u CSS "poziciju"Sa vrijednošću"apsolutna"I željene koordinate:
Pozicija:apsolutna; /* apsolutno pozicioniranje */

rezultat:



Značenje "RELATIVNO »
Relativno pozicioniranje omogućava webmasteru da pomjeri blok na web stranici, ali originalna pozicija bloka nije oslobođena za drugi element. U CSS-u napišite pravilo "pozicija"Sa vrijednošću"relativna"I željene koordinate:
pozicija:relativna; /* relativno pozicioniranje */

CSS je skraćenica od Cascading Style Sheets. CSS opisuje kako će HTML elementi biti prikazani na ekranu, papiru ili drugim medijima. CSS štedi mnogo posla. Može kontrolirati izgled više web stranica odjednom. CSS se može dodati HTML elementima na 3 načina: Inline - korišćenjem atributa style u HTML elementima Interni - korišćenjem elementa u odeljku Eksterni - korišćenjem eksterne CSS datoteke Najčešći način za dodavanje CSS-a je da zadržite stilova u zasebnim CSS datotekama. Međutim, ovdje ćemo koristiti inline i interni stil, jer je to lakše demonstrirati i lakše za tebe da probate sami.
rezultat:

Default

Relativno pozicioniranje
Ispravljeno pozicioniranje u CSS-u

Što znači "POPRAVLJENO"
Fiksno pozicioniranje omogućava webmasteru da postavlja blokove na web stranicu bilo gdje na ekranu i kada se pomiče po web stranici, blok će uvijek biti lociran u odnosu na prozor pretraživača (uvijek će biti vidljiv na ekranu). Dovoljno je upisati pravilo u CSS "poziciju"Sa vrijednošću" fiksnom"I željene koordinate:
pozicija:fiksna; /* fiksno pozicioniranje */

CSS je skraćenica od Cascading Style Sheets. CSS opisuje kako će HTML elementi biti prikazani na ekranu, papiru ili drugim medijima. CSS štedi mnogo posla. Može kontrolirati izgled više web stranica odjednom. CSS se može dodati HTML elementima na 3 načina: Inline - korišćenjem atributa style u HTML elementima Interni - korišćenjem elementa u odeljku Eksterni - korišćenjem eksterne CSS datoteke Najčešći način za dodavanje CSS-a je da zadržite stilova u zasebnim CSS datotekama. Međutim, ovdje ćemo koristiti inline i interni stil, jer je to lakše demonstrirati, a vama je lakše isprobati ga sami.
Ako rezultat nije vidljiv ili razumljiv, dodajte dovoljno teksta da se na ekranu web stranice pojavi traka za pomicanje.
To je kraj lekcije! Ostalo je još 2-3 lekcije i završićete sa savladavanjem Osnove CSS-a. To znači da možete s lakoćom kreirati prekrasne web stranice.
Ne propustite ostale lekcije! Pretplatite se na ažuriranja!
Prethodni post
Sljedeća objava

Web programeri ovih dana mogu izgraditi složene izglede web stranica koristeći razne tehnike CSS. Neke od ovih tehnika jesu duga istorija(floats), drugi (flexbox) su postigli popularnost u poslednjih godina.
U ovom članku ćemo detaljno pogledati neke malo poznate stvari o CSS pozicioniranju.
Prije nego počnemo, hajde da ukratko pogledamo osnove razne vrste pozicioniranje.
Pregled dostupnih metoda pozicioniranja
CSS svojstvo pozicija definira tip pozicije elementa.
Opcije pozicioniranja
static je zadana vrijednost svojstva pozicioniranja. Izvještavamo da ovaj element ne koristi pozicioniranje - pozicioniranje se primjenjuje samo ako navedete 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 ova svojstva - ključna riječ auto .
Imajte 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 počinje da radi svojstvo z-indeks, koje određuje redosled slaganja.
Razlike između glavnih metoda pozicioniranja
Pogledajmo sada tri osnovne razlike između dostupne vrste pozicioniranje:
• apsolutno (apsolutno) pozicionirani elementi su potpuno uklonjeni iz toka, njihovo mjesto zauzimaju najbliži susjedi.
• relativno pozicionirani (relativni) i ljepljivi (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 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" je još uvijek eksperimentalna tehnologija sa ograničenom podrškom pretraživača. Naravno, ako želite, možete koristiti polifil da dodate ovu funkcionalnost pretraživaču, ali s obzirom na nisku rasprostranjenost ovog svojstva, ovaj članak neće biti razmatran.
Elementi za pozicioniranje sa 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 da počnem od njega kada opisujem malo poznate karakteristike pozicioniranja.
Dakle, apsolutno pozicionirani element je odmaknut od svog najbližeg pozicioniranog pretka. Naravno, ovo funkcionira ako bilo koji od predaka ima poziciju koja nije statična - ako element nema pozicionirane pretke, on je pomjeren od opsega.
Izložen je sljedeći primjer:
U ovom demonstraciji, zelena kutija je inicijalno pozicionirana apsolutno sa nultim dopunama donji:0 i lijevo:0, njegov predak (crveni okvir) uopće nije pozicioniran.
Međutim, relativno smo pozicionirali vanjski omotač (element s klasom jumbotron). Obratite pažnju na to kako se pozicioniranje 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 će biti 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čiti elementi pluta 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 sa apsolutnim ili fiksnim pozicioniranjem dobija svojstva blok elementa. Konverzija inline elemenata u blok elemente je detaljnije opisana u tabeli.
V ovaj slučaj 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 svojstva širine i visine koji su na njega postavljeni rade samo sa elementima na nivou bloka i inline-bloka, a pošto nema sadržaja, nema nikakve dimenzije.
Kada crvenom polju date apsolutnu ili fiksnu poziciju, on postaje blokovski i veličine bloka navedene u njemu stupaju na snagu.
Apsolutno pozicionirani elementi nemaju padding kolaps
Podrazumevano, kada se dvije okomite margine dodiruju, one se spajaju u jednu jednaku najvećoj od njih. To se zove kolaps margine.
Ponašanje apsolutno pozicioniranih elemenata ovdje je slično plutajućim elementima - njihovi dopuni nisu spojeni sa susjedima.
U ovoj demonstraciji, element ima padding od 20px. Njegovo udubljenje se skuplja s uvlačenjem roditeljski element, također jednako 20 piksela. Kao što vidite, samo apsolutno pozicioniranje ne pada.
Ali kako možemo spriječiti padding od kolapsa? Moramo staviti neki separator između njih.
Ovo može biti padding ili obrub, a 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 (pikseli ili procenti).
Malo je neugodno, zar ne? Dakle, prvo da vidimo šta specifikacija kaže o postotnom pomaku:
Pomak kao postotak širine (za lijevo i desno) ili visine (gore ili dolje) roditeljskog bloka. Za lijepljene elemente, pomak se izračunava kao postotak širine (lijevo i desno) ili visine (gore ili dolje) toka. Dozvoljeno negativne vrijednosti.
Kao što je spomenuto, kada se pomak postavlja 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 se specificira pomak u pikselima, element se pomjera tamo gdje treba biti.
A ako odaberemo procente 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, transformisati imovinu(zajedno sa razne funkcije translate) 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 u CSS-u i razjasnio glavne probleme.
Za raspored stranica često se koriste dva glavna alata − pozicioniranje i slobodno kretanje (plutanje). CSS pozicioniranje vam omogućava da odredite gdje će se pojaviti okvir elementa, dok slobodno kretanje pomiče elemente na lijevu ili desnu ivicu kutije kontejnera, omogućavajući ostatku sadržaja da se omota oko njega.
Pozicioniranje i slobodno kretanje elemenata
1. Vrste pozicioniranja
Svojstvo pozicije vam omogućava da tačno odredite novu lokaciju kutije, u odnosu na to gde bi se nalazio u normalnom toku dokumenta. Podrazumevano, svi elementi se postavljaju uzastopno jedan za drugim redosledom kojim su definisani u strukturi HTML dokumenta. Imovina se ne nasljeđuje.
pozicija
Značenje:
statički	Zadana vrijednost znači da nema pozicioniranja. Elementi se prikazuju uzastopno jedan za drugim redosledom kojim su definisani u HTML dokumentu. Koristi se za brisanje bilo koje druge vrijednosti pozicije.
relativno	Relativno pozicionirani element se pomiče iz svog normalnog položaja različitim pravcima u odnosu na granice roditeljskog kontejnera, a prostor koji je zauzimao ne nestaje. Međutim, takav element može preklapati drugi sadržaj na stranici. Ako istovremeno postavite svojstva gornje i donje ili lijevo i desno za relativno pozicioniran element, tada će samo vrh raditi u prvom slučaju, a lijevo u drugom. Relativno pozicioniranje vam omogućava da postavite z-indeks za element, kao i apsolutno pozicioniranje podređenih elemenata unutar bloka.
apsolutno	Apsolutno pozicionirani element je potpuno uklonjen iz toka dokumenta i pozicioniran u odnosu na granice svog bloka kontejnera (drugi element ili prozor pretraživača). Blok kontejnera za apsolutno pozicionirani element je najbliži element pretka čija vrijednost svojstva položaja nije statična. Položaj rubova elementa određuje se korištenjem svojstava pomaka. Prostor koji zauzima takav element se skuplja kao da element ne postoji na stranici. Apsolutno pozicionirani element može se preklapati ili preklapati drugim elementima (zbog svojstva z-indeksa). Svaki apsolutno pozicionirani element generiše blok, odnosno uzima prikaz vrijednosti: blok; .
fiksno	Popravlja element na navedeno mjesto stranice. Blok kontejnera fiksnog elementa je okvir za prikaz, to jest, element je uvijek fiksiran u odnosu na prozor pretraživača i ne mijenja svoju poziciju tokom pomicanja stranice. Sam element je potpuno uklonjen iz glavnog toka dokumenta i kreiran u novom toku dokumenta.
početni	Postavlja vrijednost svojstva na njegovu zadanu vrijednost.
nasljediti	Nasljeđuje vrijednost svojstva od roditeljskog elementa.

Rice. 1. Razlika između statičkog, relativnog i apsolutnog pozicioniranja
2. Svojstva pomaka
Svojstva opisuju pomak u odnosu na najbližu stranu bloka kontejnera. Postavite za elemente kod kojih vrijednost svojstva pozicije nije jednaka static . Mogu imati i pozitivne i negativne vrijednosti. Nije naslijeđen.
Za svojstvo vrha, pozitivne vrijednosti pomiču gornju ivicu pozicioniranog elementa ispod, a negativne vrijednosti ga pomiču iznad gornje ivice njegovog bloka kontejnera. Za lijevo svojstvo, pozitivne vrijednosti pomiču rub pozicioniranog elementa udesno, a negativne vrijednosti ga pomiču ulijevo. To jest, pozitivne vrijednosti pomiču element unutar bloka kontejnera, a negativne vrijednosti ga pomiču van.
3. Pozicioniranje unutar elementa
Blok kontejnera apsolutno pozicioniranog elementa je postavljen na položaj: relativan bez pomaka. Ovo vam omogućava da pozicionirate elemente unutar elementa kontejnera.
.wrap ( padding: 10px; visina: 150px; pozicija: relativna; pozadina: #e7e6d4; text-align: desno; granica: 3px isprekidana #645a4e; ) .white (pozicija: apsolutna; širina: 200px; vrh: 10px; lijevo; : 10px; padding: 10px; pozadina: #ffffff; granica: 3px isprekidana #312a22; )
Rice. 2. Apsolutno relativno pozicioniranje
4. Problemi sa pozicioniranjem
1. Ako je širina ili visina apsolutno pozicioniranog elementa postavljena na auto value, tada će njegova vrijednost biti određena širinom ili visinom sadržaja elementa. Ako je širina ili visina eksplicitno deklarirana, tada će se ova vrijednost dodijeliti.
2. Ako unutar bloka sa položajem: apsolutno postoje elementi za koje float wrap, tada će visina ovog elementa biti jednaka visini najvišeg od ovih elemenata.
3. Za element sa položaj: apsolutna ili pozicija: fiksna, ne možete postaviti svojstvo float u isto vrijeme, ali za element s položaj: relativno, možete.
4. Ako je prednik pozicioniranog elementa blok element, tada je blok kontejner formiran od područja sadržaja ograničenog granicom. Ako je prednik inline element, blok kontejnera formira vanjska granica njegovog sadržaja. Ako nema pretka, element tijela je blok kontejnera.
5. Slobodno kretanje elemenata
U normalnom redoslijedu, elementi na nivou bloka se prikazuju počevši od vrha prozora pretraživača i idu prema dnu. Svojstvo float omogućava vam da premjestite bilo koji element, poravnavajući ga lijevo ili desno od web stranice ili elementa kontejnera koji sadrži. U ovom slučaju, ostali elementi bloka će ga zanemariti, i inline elementi kretat će se udesno ili ulijevo, oslobađajući prostor za njega i teći oko njega.
Rice. 3. Slobodno kretanje elementi
Plutajući blok mijenja veličinu svog sadržaja pomoću dopuna i ivica. Gornja i donja margina plutajućih elemenata se ne skupljaju. Svojstvo float primjenjuje se i na blokove i na inline elemente.
Lijeva ili desna vanjska ivica plutajućeg elementa, za razliku od pozicioniranih elemenata, ne može se nalaziti lijevo (ili desno) od unutrašnje ivice njegovog bloka kontejnera, tj. prevazilaze njene granice. U ovom slučaju, ako je unutrašnje punjenje postavljeno za blok kontejnera, tada će plutajući blok biti razmaknut od ruba bloka kontejnera za određenu udaljenost.
Svojstvo automatski mijenja izračunatu (pregledanu u pregledniku) vrijednost svojstva prikaza za prikaz: blok za sljedeće vrijednosti: inline , inline-block , table-row , table-row-group , table-column , table-column-group , table-cell , table-caption , table-header-group , table-footer-group . Vrijednost inline-tabele se mijenja u tablicu.
Svojstvo nema efekta na elemente sa display: flex i display: inline-flex .
Kada koristite svojstvo float na elementima na nivou bloka, morate navesti širinu. Ovo će učiniti da pretraživač oslobodi prostor za drugi sadržaj. Ali ako je ukupna širina svih kolona veća od raspoloživog prostora, onda posljednji elementće se spustiti.
Gde vertikalni padding Za razliku od normalnih elemenata na nivou bloka, margine plutajućih elemenata se ne skupljaju sa ispunom susjednih elemenata.
6. Odmotajte elemente
6.1. čista imovina
Svojstvo clear određuje kako će biti pozicioniran element koji slijedi nakon plutajućeg elementa. Svojstvo poništava premotavanje na jednoj ili obje strane elementa, set float property. Pravilo (preljev: skriveno;) se koristi da spriječi prikaz pozadine ili granica ispod plutajućih elemenata.
6.2. Čišćenje toka sa stilovima koristeći klasu clearfix i pseudo-klasu :after
Recimo da imamo blok kontejner koji nema specificirane širine i visine. Unutar njega je postavljen plutajući blok sa određenim dimenzijama.
.container ( padding: 20px; pozadina: #e7e6d4; granica: 3px isprekidana #645a4e; ) .floatbox (float: lijevo; širina: 300px; visina: 150px; margin-desno: 20px; padding: 0 20px; pozadina: #ffffff ; granica: 3px isprekidana #666666; ) Rice. 4. "Efekat kolapsa" blok-kontejnera
Rješenje:
Kreiramo .clearfix klasu i, u kombinaciji sa pseudoklasom :after, primjenjujemo je na blok kontejnera.
.container ( padding: 20px; pozadina: #e7e6d4; granica: 3px isprekidana #645a4e; ) .floatbox (float: lijevo; širina: 300px; visina: 150px; margin-desno: 20px; padding: 0 20px; pozadina: #ffffff ; granica: 3px isprekidana #666666; ) .clearfix:after (sadržaj: ""; prikaz: blok; visina: 0; jasno: oba; vidljivost: skriveno; )
Druga opcija za brisanje streama:
Clearfix:after (sadržaj: ""; prikaz: tabela; brisanje: oba; )
Rice. 5. Primjena "clear" metode na blok kontejnera koji sadrži plutajući element
6.3. Jednostavan način da očistite stream
Postoji još jedan trik za brisanje toka za element koji sadrži float, kao što je horizontalna lista sa nabrajanjem:
Ul ( margina: 0; stil liste: nijedan; padding: 20px; pozadina: #e7e6d4; overflow: auto; ) li ( float: lijevo; širina: calc(100% / 3 - 20px); visina: 50px; margin- desno: 20px; pozadina: #ffffff; granica: 3px isprekidana #666666; ) li:last-child (margin-desno: 0;) 6. Brisanje toka horizontalne liste