,

,

,

. Označiti
često se koristi u izgledu modernih web stranica za stvaranje mreža i jednostavno znači neku vrstu bloka ili spremnika. Također je moguće u njega ugnijezditi druge oznake, što nije moguće sa svim blok elementima, tako da
pogodan za korištenje. Blokovi se obično naslažu jedan na drugi i ne umeću se u inline elemente. HTML ugrađeni elementi su tekst, a CSS se koristi za njegovo stiliziranje.
S obzirom na širinu sadržaja, ukupna širina bloka zbroj je vrijednosti desnog i lijevog ispuna, margine, obruba i širine. Na zadanoj visini - od gornje i donje podloge, margina, obruba i visine. Tekst u elementima bloka je prema zadanim postavkama poravnat lijevo. Ako jedan od njih sadrži inline elemente zajedno s blok elementima, tada se oko inline elemenata stvara anonimni blok. Na njega će se primijeniti zadani stil. Također će naslijediti navedeni stil dodijeljen roditelju.
Protok dokumenata
Tok se odnosi na redoslijed kojim se elementi stranice prikazuju, određen svojstvima navedenim u CSS-u. U ovom slučaju, prema zadanim postavkama, blokovi su raspoređeni odozgo prema dolje, a oznake linija, ako nema dovoljno prostora, premještaju se u nova linija a raspoređeni su od vrha prema dolje i slijeva na desno. Položaj elementa na stranici ovisi o njegovom mjestu u kodu: što je viši, to je ranije smješten. Svaki od elemenata bloka izgleda kao pravokutnik koji gura svoje susjede. Ovo ponašanje možete promijeniti pomoću posebnih svojstava. Poravnavanje određenih blokova prema sredini ili stranama spremnika u CSS-u naziva se pozicioniranje.
Elementi pozicioniranja
Položaj blokova može se kontrolirati pomoću apsolutnog i relativnog pozicioniranja. Pozicioniranje se koristi kako bi se velikim dijelovima stranice dala određena lokacija, za stvaranje složenih sučelja, skočnih prozora i ukrasnih elemenata. Glavno svojstvo koje se koristi za pozicioniranje blokova u CSS-u je pozicija. Ima četiri glavna svojstva:
• relativan;
• apsolutni;
• fiksni;
• statički.
Uz njihovu pomoć možete mijenjati načine izgleda određivanjem jednog od četiri parametra: gore, desno, dolje ili lijevo. Tu je i svojstvo za redoslijed slojeva - z-index. Pozicioniranje sa statičkim svojstvom obično se ne koristi jer označava zadano pozicioniranje blokova. Stoga korištenje bilo kojeg parametra ni na koji način ne utječe na to. Ostala tri svojstva koriste se za raspored: relativno, apsolutno, fiksno.
Relativno pozicioniranje
Relativno pozicioniranje blokova u CSS-u, tj. svojstvo position:relative, znači da se element može pomicati i mijenjati njegov izvorni položaj. Takav blok i dalje ostaje u struji. Zapravo nije istisnut on sam, nego njegova kopija. Vrijednosti svojstava postavljene su tako da pokazuju točno koliko će se blok kretati u jednom ili drugom smjeru. Najčešće se mjere u pikselima. Ali prihvatljivo je koristiti druge jedinice.

Korištenje svojstava za relativno pozicioniranje
Svojstvo top pomiče kopiju određenog bloka gore ili dolje za broj piksela navedenih u svojstvu. Kada ga koristite, elementi koji se nalaze ispod ili iznad ostaju na svojim mjestima, jer se zapravo blok koji se pomiče ne pomiče nigdje.
Svojstvo bottom pomiče blok u smjeru suprotnom od svojstva top. Pozitivna vrijednost pomaže da se pomakne prema gore, a negativna vrijednost pomaže da se pomakne prema dolje. Svojstva desno i lijevo pomiču element udesno, odnosno ulijevo. Kombinirajući ih sve, možete postaviti točnu lokaciju bloka na stranici, pomičući ga duž okomite i vodoravne koordinatne osi. Ako povećate uvlake, one se neće računati od ruba samog bloka, već od njegovog pomaka kopije u stranu.

Apsolutno pozicioniranje
Apsolutno pozicioniranje blokova u CSS-u određeno je vrijednošću svojstva apsolutne pozicije. Element koji je pozicioniran apsolutno ispada iz toka dokumenta, a njegovo mjesto zauzimaju susjedni blokovi. Širina takvog elementa se rasteže ovisno o njegovom sadržaju, a može se pomaknuti postavljanjem određenih vrijednosti za svojstva gore, lijevo, desno, dolje. Apsolutno pozicioniranje blokova u CSS-u korisno je za naslove. Ali position: absolute ne radi samo za blok elemente, već i za elemente u liniji.
Poravnavanje elemenata prema sredini
Pozicionirani apsolutno inline element će se ponašati potpuno isto kao inline element. Stoga se pozicioniranje također može koristiti za kontrolu teksta u CSS-u. Na njega možete primijeniti neka nova svojstva, na primjer, promijeniti visinu i širinu. Centriranje i okomito poravnanje u CSS-u koristi kombinaciju nekoliko svojstava. Kontrolira okomito poravnanje gornjeg svojstva. Ako želite centrirati blok u CSS-u, glavni spremnik bi trebao biti relativno pozicioniran, a poravnati element trebao bi biti apsolutno pozicioniran. Spremnik mora postaviti svojstvo top: 50%, a za pomicanje elementa za polovicu vlastite visine upotrijebite svojstvo translate s vrijednošću "0, -50%". Apsolutno pozicionirani elementi mogu se razlikovati u novi tip, budući da imaju svojstva koja nisu dostupna za druge vrste pozicioniranja.

Pozicioniranje u odnosu na gornji lijevi kut preglednika
Svojstva lijevo, gore, desno i dno rade različito na apsolutno i relativno pozicioniranim elementima. Za relativne elemente, ova svojstva postavljaju pomak u odnosu na to gdje se element nalazi. Apsolutno pozicionirani zauzimaju mjesto u odnosu na određeni sustav koordinate povezane s veličinom prozora preglednika. Polazište ovog sustava su kutovi prozora. Kada koristite svojstvo lijevo, uvlaka će se brojati od lijeve strane preglednika, ali neće biti trake za pomicanje. Svojstvo top, kada je postavljeno apsolutno, specificira pomak od vrha preglednika do vrha elementa na koji se primjenjuje. Kombinacijom obaju svojstava element se može pomicati u odnosu na gornji lijevi kut preglednika.

Pozicioniranje u odnosu na gornji desni kut preglednika
Slično, pomoću svojstava desno i vrh, možete pritisnuti element na desnoj strani prozora preglednika i promijeniti njegov okomiti položaj, pomičući ga u gornji desni kut. Ako je pravo svojstvo postavljeno na negativnu vrijednost, blok će se pomaknuti izvan granice prozora. Nakon toga trebala bi se pojaviti traka za pomicanje. Da biste pomaknuli element prema dolje, koristite svojstvo bottom. Određuje uvlačenje od donjeg ruba prozora preglednika do dna bloka. Ako je njegova vrijednost negativna, pojavljuje se i traka za pomicanje jer se element pomiče iza donje granice prozora preglednika.
Koordinatni sustav za apsolutno pozicioniranje
Prema zadanim postavkama, svi elementi kojima je dana apsolutna pozicija vezani su za jedan koordinatni sustav - prozor preglednika. Ali može se promijeniti davanjem relativnog položaja nekom nadređenom elementu. Tada će podređeni blok promijeniti svoju lokaciju ovisno o roditelju. Ako među roditeljskim elementima postoji nekoliko s relativnim položajem, tada se brojanje provodi od najbližeg od njih. U ovom slučaju, zadano pozicioniranje bit će ono što je navedeno u oznaci tijela.

Referentna točka za apsolutno pozicionirani element
Prije nego što je element dobio apsolutno pozicioniranje, nalazio se na nekom mjestu koje se naziva implicitno podrijetlo. Ako se takvom bloku ne daju svojstva, on se neće pomaknuti. Možete ga pomaknuti postavljanjem svojstva margine. Radit će slično svojstvima pozicioniranja. Ako ne definirate vrijednost svojstva lijevo i svih ostalih, tada će biti jednako auto. Također možete koristiti auto za vraćanje elemenata na svoje stara mjesta.

Fiksno pozicioniranje
Druga vrijednost je fiksna. Svojstvo položaja usidri element na određeno mjesto. Fiksno pozicioniranje često se koristi za izradu izbornika u CSS-u. Sličan je apsolutnom, ali fiksni blok ispada iz toka. Čak i kada se pomičete po stranici, takav će element ostati na mjestu, pa je prikladno koristiti ga za izradu izbornika u CSS-u. Početna točka bit će vezana za prozor preglednika. Ako postoji nekoliko pozicioniranih blokova, svojstvo z-index koristi se za njihov poredak. Uz njegovu pomoć možete preklapati relativne blokove s apsolutnim ako im date odgovarajući indeks, izražen kao cijeli broj. Što je veći, blok će biti viši.
Pozicioniranje je jedan od ključni koncepti V raspored blokova. Kad to shvatite, mnogo toga će vam postati jasno, a layout će se iz šamanizma pretvoriti u smislen proces. Stoga će se ovaj članak usredotočiti na svojstva CSS-a. položaj I plutati.
1. pozicija: statična
Prema zadanim postavkama, svi elementi na stranici imaju statično pozicioniranje (position: static), što znači da element nije pozicioniran, te se u dokumentu pojavljuje na svom uobičajenom mjestu, odnosno istim redoslijedom kao u HTML markupu.
Nema potrebe posebno dodijeliti ovo svojstvo bilo kojem elementu, osim ako ne morate promijeniti prethodno postavljeno pozicioniranje na zadano.
#sadržaj( pozicija: statična; )
2.položaj:relativni
Relativno pozicioniranje (položaj: relativno) omogućuje vam korištenje svojstava vrh, dno, lijevo i desno za pozicioniranje elementa u odnosu na mjesto gdje bi se pojavio da je postavljen normalno.
Pomaknimo #content 20 piksela prema dolje i 40 piksela ulijevo:
#content( pozicija: relativna; gore: 20px; lijevo: -40px; )

Primijetite da sada postoji prazan prostor gdje bi bio naš #content blok. Nakon bloka #content, blok #footer nije se pomaknuo prema dolje jer #content još uvijek zauzima svoje mjesto u dokumentu iako smo ga pomaknuli.
U ovoj fazi može se činiti da relativno pozicioniranje nije toliko korisno, ali nemojte žuriti sa zaključcima, kasnije u članku saznat ćete za što se može koristiti.
3. pozicija: apsolutna
Na apsolutno pozicioniranje(položaj: apsolutni), element se uklanja iz dokumenta i pojavljuje tamo gdje mu kažete.
Premjestimo, na primjer, blok #div-1a u gornji desni kut stranice:
#div-1a (position:apsolute; top:0; right:0; width:200px; )

Primijetite da su ovaj put, budući da je blok #div-1a uklonjen iz dokumenta, preostali elementi na stranici pozicionirani drugačije: #div-1b, #div-1c i #footer pomaknuti su iznad, umjesto uklonjenog bloka . A sam blok #div-1a nalazi se točno s desne strane, gornji kut stranice.
Na ovaj način možemo pozicionirati bilo koji element u odnosu na stranicu, ali to nije dovoljno. Zapravo, moramo pozicionirati #div-1a u odnosu na nadređeni #content blok. I u ovoj točki relativno pozicioniranje ponovno dolazi u igru.
4. položaj: fiksni
Fiksno pozicioniranje (pozicija: fiksno) je pododsjek apsolutnog pozicioniranja. Njegova jedina razlika je u tome što je uvijek u vidljivom području zaslona i ne pomiče se tijekom pomicanja stranice. U tom smislu, pomalo je poput fiksne pozadinske slike.
#div-1a (position:fixed; top:0; right:0; width:200px; )

U IE s položajem: fiksno, nije sve glatko kako bismo željeli, ali postoji Mnogo načina zaobići ova ograničenja.
5. pozicija:relativna + pozicija:apsolutna
Dodjeljivanjem relativnog položaja bloku #content (position: relative), možemo postaviti bilo koji podređeni element u odnosu na njegove granice. Postavimo #div-1a blok u gornji desni kut #content bloka.
#content (position:relative;) #div-1a (position:absolute; top:0; right:0; width:200px;)

6. Dva stupca
Naoružani znanjem iz prethodnih koraka, možete pokušati napraviti dva stupca koristeći relativno i apsolutno pozicioniranje.
#content (position:relative;) #div-1a (position:apsolute; top:0; right:0; width:200px;) #div-1b (position:absolute; top:0; left:0; width:200px) ;)

Jedna od prednosti apsolutnog pozicioniranja je mogućnost postavljanja elemenata bez posebnog reda, bez obzira na to kako se točno nalaze u oznaci. U gornjem primjeru, blok #div-1b postavljen je prije bloka #div-1a.
I sada biste trebali imati pitanje: "Kamo su nestali ostali elementi iz našeg primjera?" Sakrili su se ispod savršeno postavljenih blokova. Srećom, postoji način da se to riješi.
7. Dva stupa s fiksnom visinom
Jedno je rješenje dati fiksnu visinu spremniku koji sadrži stupce.
#content (position:relative; height: 450px;) #div-1a (position:apsolute; top:0; right:0; width:200px;) #div-1b (position:apsolute; top:0; left:0 ; širina: 200 px; )

Rješenje nije baš prikladno, jer nikada unaprijed ne znamo koje veličine će se tekst nalaziti u stupcima i koji će se font koristiti.
8. Plutajte
Za stupce promjenjive visine, apsolutno pozicioniranje nije opcija, pa pogledajmo drugu opciju.
Dodjeljujući bloku float, guramo ga što je više moguće na desni (ili lijevi) rub, a tekst koji slijedi iza bloka će teći oko njega. Ova tehnika se obično koristi za slike, ali mi ćemo je koristiti za više težak zadatak, jer je to jedini alat koji nam je na raspolaganju.
#div-1a (float:left; width:200px;)

9. “Plutajući” zvučnici
Ako dodijelimo float: left prvom bloku, a zatim float: left drugom, svaki blok će biti gurnut na lijevi rub, i dobit ćemo dva stupca, s promjenjivom visinom.
#div-1a (float:lijevo; širina:150px;) #div-1b (float:lijevo; širina:150px;)

Također, možete dodijeliti suprotnost stupcima float vrijednost, u ovom slučaju, oni će biti raspoređeni duž rubova posude.
#div-1a (float:desno; širina:150px;) #div-1b (float:lijevo; širina:150px;)

Ali sada imamo još jedan problem - stupci se protežu izvan nadređenog spremnika, razbijajući tako cijeli izgled. Ovo je najčešći problem za dizajnere izgleda početnika, iako se može riješiti prilično jednostavno.
10. Plovak za čišćenje
Čišćenje plovaka može se obaviti na dva načina. Ako iza stupaca postoji još jedan blok, dovoljno mu je dodijeliti clear: both.
#div-1a (float:left; width:190px;) #div-1b (float:left; width:190px;) #div-1c (clear:both;)
Ili dodijelite svojstvo overflow: hidden nadređenom spremniku
#sadržaj ( overflow:hidden; )
U svakom slučaju, rezultat će biti isti.

Zaključak
Danas su se razmatrale samo osnovne tehnike pozicioniranja, i to najviše jednostavni primjeri. Također, kao pomoć dizajnerima početnicima, uvijek preporučujem seriju članaka Ivana Sagalayeva, koji mi je svojedobno puno pomogao.
15.03.2017
Ne još


Bok svima!
U današnjem vodiču pokazat ću vam kako možete koristiti pozicioniranje bloka za postavljanje elementa bilo gdje na zaslonu.
Što nam daje pozicioniranje blokova? Koristeći pozicioniranje blokova, webmaster može stvoriti bilo koji jedinstven dizajn mjesto, postavljajući blokove gdje želi. Za postavljanje blokova bilo gdje na zaslonu, samo odredite koordinate.
Koordinate u CSS-u
Vlasništvo "VRH» | « LIJEVO» | « PRAVO» | « DNO »
Za pozicioniranje blokova potrebno je zadati koordinate, odnosno gdje će blok biti postavljen.
Dijagram koordinatnog sustava:

Koordinate su određene prema četiri pravila:
• vrh- gore;
• lijevo- lijevo;
• pravo- desno;
• dno- dolje.
Sintaksa:
Koordinata_pravila: koordinata_vrijednosti;
Značenje:
Navedite vrijednost u px ili %.
Vrh:100px; /* gornji rub */ lijevo:100px; /* lijevi rub */
Dovoljno je samo odrediti koordinate za dva ruba (gornji ili donji, lijevi ili desni).
Pozicioniranje u CSS-u

Vlasništvo "POLOŽAJ »
Pozicioniranje je zapisano u CSS-u kroz pravilo “position” sa željenom vrijednošću.
Sintaksa:
Pozicija: vrijednost;
Značenje:
• apsolutni– apsolutni;
• relativna– srodnik;
• fiksni– fiksno.
Prođimo kroz svaku vrijednost.


Značenje " APSOLUTNO"
Apsolutno pozicioniranje omogućuje webmasteru postavljanje blokova na web stranicu bilo gdje na zaslonu. Dovoljno je napisati pravilo “position” u CSS-u s vrijednošću “absolute” i potrebnim koordinatama:
Pozicija: apsolutna; /* apsolutno pozicioniranje*/

Proizlaziti:



Značenje "RODBINA »
Relativno pozicioniranje omogućuje webmasteru da premjesti blok na web stranici, ali se izvorni prostor bloka ne oslobađa za drugi element. U CSS-u napišite pravilo “position” s vrijednošću “relative” i željenim koordinatama:
Položaj: rođak; /* relativno pozicioniranje*/

CSS je kratica za Cascading Style Sheets. CSS opisuje kako HTML elementi trebaju biti prikazani na ekranu, papiru ili u drugim medijima. CSS štedi puno posla. Može kontrolirati izgled više web stranica odjednom. CSS se može dodati HTML elementima na 3 načina: Inline - korištenjem atributa style u HTML elementima Interno - korištenjem elementa u odjeljku External - korištenjem vanjske CSS datoteke. Najčešći način dodavanja CSS-a je zadržati stilova u zasebnim CSS datotekama. Međutim, ovdje ćemo koristiti inline i interni stil, jer je to lakše pokazati i lakše za tebe da sami probate.
Proizlaziti:

Zadano

Relativno pozicioniranje
Fiksno pozicioniranje u CSS-u

"FIKSNA" vrijednost
Fiksno pozicioniranje omogućuje webmasteru postavljanje blokova na web stranicu bilo gdje na ekranu, a prilikom pomicanja web stranice blok će uvijek biti lociran u odnosu na prozor preglednika (uvijek će biti vidljiv na ekranu). Dovoljno je napisati pravilo “position” u CSS-u s vrijednošću “fixed” i potrebnim koordinatama:
Položaj: fiksni; /* fiksno pozicioniranje */

CSS je kratica za Cascading Style Sheets. CSS opisuje kako HTML elementi trebaju biti prikazani na ekranu, papiru ili u drugim medijima. CSS štedi puno posla. Može kontrolirati izgled više web stranica odjednom. CSS se može dodati HTML elementima na 3 načina: Inline - korištenjem atributa style u HTML elementima Interno - korištenjem elementa u odjeljku External - korištenjem vanjske CSS datoteke. Najčešći način dodavanja CSS-a je zadržati 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 sami.
Ako rezultat nije vidljiv ili jasan, dodajte dovoljno teksta da napravite traku za pomicanje na zaslonu web stranice.
To je to za lekciju! Ostale su još 2-3 lekcije i završit ćete svladavanje osnove CSS-a. To znači da možete s lakoćom stvarati prekrasne web stranice.
Ne propustite ostale lekcije! Pretplatite se na ažuriranja!
Prethodni post
Sljedeći unos

Ovih dana web programeri mogu izraditi složene izglede web stranica pomoću razne tehnike CSS. Neke od ovih tehnika imaju duga priča(floats), ostali (flexbox) su postigli popularnost u posljednjih godina.
U ovom ćemo članku pobliže pogledati neke malo poznate stvari o CSS pozicioniranju.
Prije nego što počnemo, kratko ponovimo osnove. različite vrste pozicioniranje.
Pregled dostupnih metoda pozicioniranja
CSS svojstvo position specificira tip pozicioniranja elementa.
Mogućnosti pozicioniranja
static je zadana vrijednost svojstva pozicioniranja. Savjetujemo da ovaj element ne koristi pozicioniranje - pozicioniranje se primjenjuje samo ako navedete vrstu pozicioniranja koja nije zadana.
Da biste to učinili, morate postaviti svojstvo pozicije na jednu od sljedećih vrijednosti:
• relativna
• apsolutni
• fiksni
• ljepljiv
I tek nakon postavljanja pozicioniranja, možete koristiti svojstva koja pomiču element:
• pravo
• dno
• Početna vrijednost ova svojstva - ključna riječ auto.
Treba uzeti u obzir da ako element ima svojstvo položaja postavljeno na apsolutno ili fiksno, tada je to apsolutno pozicioniran element. Također, svojstvo z-index počinje raditi za pozicionirane elemente, što određuje redoslijed slaganja.
Razlike između glavnih metoda pozicioniranja
Sada brzo pogledajmo tri osnovne razlike između dostupne vrste pozicioniranje:
• apsolutno (apsolutno) pozicionirani elementi su potpuno uklonjeni iz toka, njihovo mjesto zauzimaju njihovi najbliži susjedi.
• relativno postavljeni (relativni) i slijepljeni (sticky) zadržavaju svoje mjesto u toku i njihovi najbliži susjedi ga ne zauzimaju. Međutim, ispuna ovih elemenata ne zauzima prostor, ali je potpuno zanemarena od strane drugih elemenata i to može rezultirati preklapanjem elemenata.
• fiksni elementi (a fiksno pozicioniranje je vrsta apsolutnog) uvijek su pozicionirani u odnosu na područje vidljivosti (ignorirajući prisutnost pozicioniranja u precima), dok su ljepljivi elementi pozicionirani u odnosu na najbližeg pretka s pomicanjem (overflow: auto). I samo u nedostatku takvih predaka, oni su postavljeni u odnosu na zonu vidljivosti.
To možete detaljnije vidjeti u demonstraciji:
Napomena: pozicioniranje ljepljivog elementa još uvijek je eksperimentalna tehnologija s ograničenom podrškom u preglednicima. Naravno, ako želite, možete upotrijebiti polifil za dodavanje ove funkcije u preglednik, ali s obzirom na njegovu nisku prevalenciju, ovo svojstvo neće biti razmatrano u članku.
Elementi pozicioniranja s apsolutnim tipom pozicioniranja
Siguran sam da većina ljudi zna kako funkcionira apsolutno pozicioniranje. Međutim, mnoge stvari o tome mogu zbuniti početnike.
Stoga sam odlučio započeti s njim pri opisivanju malo poznatih značajki pozicioniranja.
Dakle, apsolutno pozicionirani element je pomaknut u odnosu na svog najbližeg pozicioniranog pretka. Naravno, ovo funkcionira ako bilo koji od predaka ima položaj koji nije statički - ako element nema pozicionirane pretke, pomaknut je u odnosu na područje vidljivosti.
Ovo je pokazano sljedeći primjer:
U ovoj demonstraciji, zeleni blok je inicijalno pozicioniran apsolutno s nultom popunom bottom:0 i left:0, njegov predak (crveni blok) nije uopće pozicioniran.
Međutim, relativno smo pozicionirali vanjski omotač (element s klasom jumbotron). Primijetite kako se položaj zelenog bloka mijenja kada se promijeni tip položaja njegovih predaka.
Apsolutno pozicionirani elementi zanemaruju svojstvo float
Ako primijenimo apsolutno ili fiksno pozicioniranje na plutajući element, svojstvo float bit će postavljeno na none. S druge strane, ako postavimo relativno pozicioniranje, element će ostati plutajući.
Pogledajte odgovarajući demo:
U ovom primjeru definiramo dva drugačiji element, lebdeći udesno. Imajte na umu da kada crveni blok postane apsolutno pozicioniran, on zanemaruje vrijednost svojstva float, dok relativno pozicioniran zeleni blok zadržava float vrijednost.
Apsolutno pozicionirani inline elementi postaju blok elementi
Inline element s apsolutnim ili fiksnim pozicioniranjem preuzima svojstva blok elementa. Pretvorba inline elemenata u blok elemente je detaljnije opisana u tablici.
U 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 njegova svojstva širine i visine rade samo s elementima bloka i inline-bloka, a budući da nema sadržaja, nema ni dimenzije.
Kada crvenom bloku dodijelite apsolutnu ili fiksnu poziciju, on postaje blok blok 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 maksimalnom od njih. To se zove kolaps margine.
Ponašanje apsolutno pozicioniranih elemenata ovdje je slično plutajućim elementima - njihova ispuna nije kombinirana sa svojim susjedima.
U ovoj demonstraciji, elementu je dodijeljena ispuna od 20 piksela. Njegovo udubljenje ruši se udubljenjem nadređeni element, također jednako 20 piksela. Kao što vidite, samo uz apsolutno pozicioniranje nema kolapsa.
Ali kako možemo spriječiti pad marži? Moramo staviti neku vrstu razdjelnika između njih.
To može biti ispuna ili rub, a može se primijeniti i na roditeljske i na podređene elemente. Druga mogućnost je dodavanje clearfixa nadređenom 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 zbunjujuće, zar ne? Prvo da vidimo što specifikacija kaže o postotku pomaka:
Pomak kao postotak širine (lijevo i desno) ili visine (gore ili dolje) nadređenog bloka. Za lijepljene elemente, pomak se izračunava kao postotak širine (za lijevo i desno) ili visine (gore ili dolje) toka. Prihvatljiv negativne vrijednosti.
Kao što je spomenuto, kada postavite pomak kao postotak, položaj elementa ovisi o širini i visini njegovog roditelja.
Demo prikazuje ovu razliku:
Ovaj primjer koristi piksele i postotke za pomak. Naravno, kada navedete pomak u pikselima, element se pomiče tamo gdje je potreban.
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 vjerojatno znate, transformirati vlasništvo(zajedno s razne funkcije translate) 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 na njegovom roditelju.
Zaključak
Nadam se da vam je ovaj članak pomogao da bolje razumijete pozicioniranje u CSS-u i razjasnio neke od izazova.
Dva glavna alata često se koriste za izgled stranice - pozicioniranje I slobodno kretanje (plutanje). CSS pozicioniranje omogućuje vam da odredite gdje se okvir elementa pojavljuje, a free float pomiče elemente na lijevi ili desni rub okvira spremnika, dopuštajući ostatku sadržaja da "teče" oko njega.
Pozicioniranje i slobodno kretanje elemenata
1. Vrste pozicioniranja
Svojstvo položaja omogućuje vam da precizno odredite novu lokaciju bloka u odnosu na to gdje bi on bio u normalnom toku dokumenta. Prema zadanim postavkama, svi elementi su poredani jedan za drugim redoslijedom kojim su definirani u strukturi HTML dokumenta. Imovina se ne nasljeđuje.
položaj
Značenje:
statički	Zadana vrijednost znači da nema pozicioniranja. Elementi se prikazuju sekvencijalno jedan za drugim redoslijedom kojim su definirani u HTML dokumentu. Koristi se za brisanje bilo koje druge vrijednosti pozicioniranja.
relativna	Relativno pozicioniran element premješta se sa svoje normalne lokacije na različitih smjerova u odnosu na granice nadređenog spremnika, a prostor koji je zauzimao ne nestaje. Međutim, takav element može preklapati drugi sadržaj na stranici. Ako za relativno pozicionirani element postavite svojstva gore i dolje ili lijevo i desno u isto vrijeme, tada će u prvom slučaju raditi samo vrh, u drugom - lijevo. Relativno pozicioniranje omogućuje vam postavljanje z-indeksa za element, kao i apsolutno pozicioniranje podređenih elemenata unutar bloka.
apsolutni	Apsolutno pozicionirani element potpuno se uklanja iz tijeka dokumenta i postavlja u odnosu na granice svog bloka spremnika (drugi element ili prozor preglednika). Blok spremnika za apsolutno pozicionirani element je najbliži element pretka čija vrijednost svojstva položaja nije statična. Položaj rubova elementa određuje se pomoću svojstava pomaka. Prostor koji je takav element zauzimao kolabira kao da element ne postoji na stranici. Apsolutno pozicionirani element može se preklapati ili biti nadređen drugim elementima (zbog svojstva z-index). Svaki apsolutno pozicionirani element generira blok, odnosno preuzima vrijednost display: block; .
fiksni	Popravlja element na navedeno mjesto stranice. Blok spremnika fiksnog elementa je okvir za prikaz, to jest, element je uvijek fiksan u odnosu na prozor preglednika i ne mijenja svoj položaj tijekom pomicanja stranice. Sam element je potpuno uklonjen iz glavnog tijeka dokumenata i kreiran u novom tijeku dokumenata.
početni	Postavlja vrijednost svojstva na zadanu vrijednost.
naslijediti	Nasljeđuje vrijednost svojstva od nadređenog elementa.

Riža. 1. Razlika između statičkog, relativnog i apsolutnog pozicioniranja
2. Svojstva ofseta
Svojstva opisuju pomak u odnosu na najbližu stranu bloka spremnika. Postavite za elemente za koje vrijednost svojstva položaja nije statična. Mogu imati i pozitivne i negativne vrijednosti. Nije naslijeđeno.
Za top svojstvo, pozitivne vrijednosti pomiču gornji rub pozicioniranog elementa ispod, a negativne vrijednosti pomiču gornji rub njegovog bloka spremnika. Za svojstvo lijevo, pozitivne vrijednosti pomiču rub pozicioniranog elementa udesno, a negativne vrijednosti pomiču rub pozicioniranog elementa ulijevo. Odnosno, pozitivne vrijednosti pomiču element unutar bloka spremnika, a negativne ga pomiču izvan njega.
3. Pozicioniranje unutar elementa
Za blok spremnika apsolutno pozicioniranog elementa, svojstvo position: relative se postavlja bez pomaka. To omogućuje postavljanje elemenata unutar elementa spremnika.
.wrap ( padding: 10px; visina: 150px; položaj: relativan; pozadina: #e7e6d4; poravnanje teksta: desno; rub: 3px isprekidano #645a4e; ) .white ( položaj: apsolutni; širina: 200px; vrh: 10px; lijevo : 10px; ispuna: 10px; pozadina: #ffffff; obrub: 3px isprekidano #312a22; )
Riža. 2. Apsolutno relativno pozicioniranje
4. Problemi s pozicioniranjem
1. Ako je zadana širina ili visina apsolutno pozicioniranog elementa auto vrijednost, tada će njegova vrijednost biti određena širinom ili visinom sadržaja elementa. Ako su širina ili visina deklarirane eksplicitno, to je vrijednost koja će biti dodijeljena.
2. Ako unutar bloka s position: absolute postoje elementi za koje omotač plovka, tada će visina ovog elementa biti jednaka visini najvišeg od tih elemenata.
3. Za element s position: absolute ili position: fixed, ne možete istovremeno postaviti svojstvo float, ali za element s position: relative, možete.
4. Ako je predak pozicioniranog elementa blok element, tada blok spremnik formira područje sadržaja omeđeno rubom. Ako je predak element u liniji, blok spremnika formira vanjska granica njegovog sadržaja. Ako nema pretka, blok spremnika je element tijela.
5. Slobodno kretanje elemenata
U normalnom redoslijedu, blok elementi se renderiraju počevši od gornjeg ruba prozora preglednika prema donjem rubu. Svojstvo float omogućuje vam da premjestite bilo koji element, poravnavajući ga s lijevim ili desnim rubom web stranice ili elementa spremnika koji ga sadrži. U tom slučaju, drugi elementi bloka će ga zanemariti, i inline elementi pomaknut će se udesno ili ulijevo, oslobađajući mu prostor i teći oko njega.
Riža. 3. Slobodno kretanje elementi
Plutajući blok preuzima dimenzije svog sadržaja, uzimajući u obzir podstavu i obrube. Gornja i donja margina plutajućih elemenata se ne skupljaju. Svojstvo float primjenjuje se i na blok elemente i na inline elemente.
Lijevi ili desni vanjski rub pomaknutog elementa, za razliku od pozicioniranih elemenata, ne može se nalaziti lijevo (ili desno) od unutarnjeg ruba njegovog bloka spremnika, tj. izaći izvan njegovih granica. Štoviše, ako je za blok spremnika navedeno unutarnje punjenje, tada će plutajući blok biti udaljen od ruba bloka spremnika na navedenoj udaljenosti.
Svojstvo automatski mijenja izračunatu (preglednikom prikazanu) vrijednost svojstva prikaza za prikaz: blok za sljedeće vrijednosti: inline , inline-block , table-row , table-row-group , table-column , table-column-group , ćelija-tablice .naslov-tablice, grupa-zaglavlja-tablice, grupa-podnožja-tablice. Vrijednost inline-table mijenja se u tablicu.
Svojstvo nema učinka na elemente s display: flex i display: inline-flex.
Kada koristite svojstvo float na elementima bloka, svakako navedite širinu. Ovo će stvoriti prostor za drugi sadržaj u pregledniku. Ali ako je kombinirana širina svih stupaca veća od dostupnog prostora, tada posljednji elementće sići.
pri čemu okomite margine Margine lebdećih elemenata ne kolabiraju se s marginama susjednih elemenata, za razliku od uobičajenih blok elemenata.
6. Otkažite protok oko elemenata
6.1. jasno svojstvo
Svojstvo clear određuje kako će se postaviti element koji slijedi plutajući element. Svojstvo poništava omotavanje oko jedne ili obje strane elementa koji je postavljen plutajuće svojstvo. Kako biste spriječili prikaz pozadine ili obruba ispod plutajućih elemenata, koristite pravilo (overflow: hidden;).
6.2. Čišćenje toka sa stilovima korištenjem klase clearfix i pseudoklase :after
Pretpostavimo da imate blok spremnik za koji nisu navedene širina i visina. Unutar njega se postavlja plutajući blok zadanih dimenzija.
.container ( padding: 20px; pozadina: #e7e6d4; border: 3px dashed #645a4e; ) .floatbox (float: lijevo; širina: 300px; visina: 150px; margin-desno: 20px; padding: 0 20px; pozadina: #ffffff ; rub: 3px isprekidano #666666; ) Riža. 4. “Efekt kolapsa” bloka spremnika
Rješenje problema:
Stvaramo klasu .clearfix i, u kombinaciji s pseudoklasom :after, primjenjujemo je na blok spremnika.
.container ( padding: 20px; pozadina: #e7e6d4; border: 3px dashed #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: oboje; vidljivost: skriveno; )
Druga opcija za brisanje streama:
Clearfix:after ( content: ""; display: table; clear: both; )
Riža. 5. Primjena metode "čišćenja" na kontejnerski blok koji sadrži plutajući element
6.3. Jednostavan način za čišćenje potoka
Postoji još jedan trik za brisanje toka za element koji sadrži plutajuće elemente, kao što je horizontalni popis s grafičkim oznakama:
Ul (margina: 0; list-style: none; padding: 20px; background: #e7e6d4; overflow: auto; ) li (float: left; width: calc(100% / 3 - 20px); height: 50px; margin- desno: 20px; pozadina: #ffffff; obrub: 3px isprekidano #666666; ) li:posljednje-dijete (margina-desno: 0;) sl. 6. Čišćenje horizontalnog tijeka popisa