Zadnja izmjena: 28.04.2016

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

Glavno svojstvo koje kontrolira pozicioniranje u CSS-u je svojstvo position. Ovo svojstvo može uzeti jednu od sljedećih vrijednosti:

statički : standardno pozicioniranje elementa, zadana vrijednost

apsolutno: element je postavljen relativno u odnosu na granice elementa spremnika ako njegovo svojstvo položaja nije statično

relativno : Element je postavljen relativno u odnosu na svoj zadani položaj. Tipično, glavna svrha relativnog pozicioniranja nije pomicanje elementa, već uspostavljanje nove sidrišne točke za apsolutno pozicioniranje njegovih ugniježđenih elemenata

fiksni : element je pozicioniran u odnosu na prozor preglednika, što vam omogućuje stvaranje fiksnih elemenata koji ne mijenjaju položaj kada se pomiču

Ne biste trebali istodobno primjenjivati ​​svojstvo float i bilo koji tip pozicioniranja osim statičnog (tj. zadanog tipa) na element.

Apsolutno pozicioniranje

Područje za pregled preglednika ima gornji, donji, desni i lijevi rub. Svaki od ova četiri ruba ima odgovarajuće CSS svojstvo: lijevo, desno, gore i dolje. Vrijednosti za ova svojstva navedene su u pikselima, em ili postocima. Nije potrebno postaviti vrijednosti za sve četiri strane. U pravilu su postavljene samo dvije vrijednosti - uvlaka od gornjeg ruba gore i uvlaka od lijevog ruba lijevo.

ZDRAVO SVIJETE

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

Nije toliko važno da nakon ovog div elementa postoje neki drugi elementi. Ovaj div blok će u svakom slučaju biti postavljen u odnosu na granice prozora preglednika.

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

Relativno pozicioniranje

Relativno pozicioniranje također je određeno pomoću relativne vrijednosti. Za određivanje određenog položaja na koji se element pomiče, koriste se ista svojstva gore, lijevo, desno, dolje:

svojstvo z-index

Prema zadanim postavkama, kada dva elementa imaju isti obrub, element koji je zadnji definiran u HTML oznakama prikazuje se iznad drugog. Međutim, svojstvo z-index omogućuje vam promjenu redoslijeda elemenata kada se preklapaju. Svojstvo uzima broj kao vrijednost. Elementi s većom vrijednošću z-indeksa pojavit će se iznad elemenata s manjom vrijednošću z-indeksa.

Na primjer:

Dodajmo sada 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-index 100. Ali ne mora biti broj 100. Budući da drugi blok ima nedefinirani z-index i zapravo je nula, za redBlock možemo postaviti svojstvo z-index na bilo koju vrijednost veću od nula.

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

Ovih dana web programeri mogu izraditi složene izglede web stranica koristeći različite CSS tehnike. Neke od ovih tehnika imaju dugu povijest (lebdeći), druge (flexbox) su stekle popularnost posljednjih godina.

U ovom ćemo članku pobliže pogledati neke malo poznate stvari o CSS pozicioniranju.

Prije nego što počnemo, ukratko pregledajmo osnove različitih vrsta pozicioniranja.

Pregled dostupnih metoda pozicioniranja

CSS svojstvo položaja određuje vrstu 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
• ljepljiva

I tek nakon postavljanja pozicioniranja, možete koristiti svojstva koja pomiču element:

• pravo
• dno
• Početna vrijednost ovih svojstava je 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 dostupnih vrsta pozicioniranja:

• 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: ljepljivo pozicioniranje 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.

To pokazuje 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 različita elementa koji lebde 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 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. Njegova ispuna se skuplja s popunom nadređenog elementa, koja također iznosi 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) protoka. Negativne vrijednosti su prihvatljive.

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, svojstvo transformacije (zajedno s raznim funkcijama prevođenja) također vam omogućuje promjenu položaja elementa. Ali u ovom slučaju, kada se koriste postoci, izračun će se temeljiti na veličini samog elementa, a ne 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.

Potrebno je premjestiti (odvući, prevrnuti i sl.) 3 temeljna bloka 300x600x2400 najmanje 3-5 metara. Problem je što se nalaze iza kuće i nema pristupa za dizalicu ili drugu specijalnu opremu.
Kasnije sam blokove htio iskoristiti za izgradnju verande. Ali sada samo trebam osloboditi prostor gdje leže - tamo planiram sjenicu.
Težina svakog (ako sam dobro brojao) je oko 1 tone. Što mislite o ovome?

Da, nije lako, ali je izvedivo. Svekar i ja smo uzeli običnu dizalicu za auto i nekoliko, čini se, cijevi od dva inča i polugu. Naša tri bloka su također ležala na nezgodnom mjestu, pomaknuli smo ih 15-tak metara. Učinili smo ovo: Ispod ruba bloka (leže na njegovu stranu, tj. na najširi rub) iskopali smo rupu, duboku za dizalicu. i ruku kroz koju treba proći, tako da je to bilo da pumpa njegovu polugu. Na dno rupe stavljen je mali komad ravne daske da ne zaprlja dizalicu i da se pod opterećenjem ne zabije u zemlju. Zatim su sasvim pristojno podigli blok s jednog ruba, gurajući ga odozdo dizalicom. Ne znam točno pod kojim kutom, u odnosu na tlo, ali tako da se nekoliko komada cijevi od pola metra može ravnomjerno postaviti ispod bloka. Zatim je dizalica spuštena i blok je položen na cijevi i izravnan u odnosu na površinu zemlje. Zatim je pajser umetnut u najduži dio cijevi (~1,8 m), koji nije bio postavljen ispod bloka (radi krutosti) i ovaj hibrid je korišten kao poluga, zabijajući ga ispod drugog kraja bloka i podižući ga u odnosu na tlo (povećavajući kut između poluge i tla) odgurnuli blok kao da od sebe. Princip pomicanja blokova egipatskih piramida. Samo umjesto trupaca, cijevi su korištene kao valjci. Ako je tlo tekuće, možete prvo, prije spuštanja dizalice, postaviti dugačke ravne daske ispod cijevi tako da težina bloka ne zatrpa cijevi. Guramo, ne zaboravljajući staviti novu cijev ispod "pramca" bloka, a oslobođenu cijev ispod "krme" pripremiti kao sljedeću ispod pramca.
Sveukupno smo te blokove kotrljali 3 godine svako ljeto dok ih nismo kotrljali do vrata. Svi su razmišljali o tome kako ih iskoristiti, ali nikada nisu došli do toga. Naručili smo manipulatora, on ih je odmah na kapiji natovario na sebe i odveo u nepoznatom pravcu, uz nadoknadu.
Poteškoće nastaju na zavojima ako ih ima, ali sve je moguće i ako čekićem udarate po cijevima ispod bloka, usmjeravate ih i podešavate položaj bloka polugom sa strane. Samo se čini teškim, ali onda se naviknete.

p.s. Vitlo koje smo kupili posebno za ove blokove puno je pomoglo. Kuka vitla može se zakačiti na stupove ograde (naši su dobro izdržali) i vitlo se može koristiti za povlačenje blokova kroz cijevi do tih stupova. Blok bi trebao imati 2 ušice od armature, kako bi se vitlo zakačilo za njih. Ovo je lakše od guranja polugom, ali traje dulje i zahtijeva puno truda - cijelo vrijeme morate trčati okolo ponovno zakačivši vitlo za sljedeći stup.

P.P.S. Objasnio sam najbolje što sam mogao - oprosti.

Prilikom pozicioniranja blok relativnog, trebate postaviti svojstvo položaj: relativni i svojstva pomaka. Pomak u ovom slučaju neće se dogoditi u odnosu na "roditeljski" element (kao kod apsolutnog pozicioniranja), već u odnosu na sam blok u normalnom toku. Ovo će biti jasnije uz primjer. Recimo da imamo HTML stranicu s tri diva:

Relativno pozicioniranje

Postavimo veličine i granice ovih blokova u listu stilova:

#blok1, #blok2, #blok3 (obrub:1px puna crvena; širina:150px; visina:50px;)

Sada naša stranica u pregledniku izgleda ovako:

Sada promijenimo položaj drugog bloka dodavanjem pravila na stranicu stila:

#blok1, #blok2, #blok3 ( border:1px full red; width:150px; height:50px; ) #blok2( position:relative; left:50px; top:25px; )

Sada naša stranica izgleda ovako:

Naš drugi blok pomaknuo se dolje i udesno u odnosu na mjesto gdje bi bio u normalnom toku. Preostali blokovi ostali su na svojim mjestima. U praksi se relativno pozicioniranje koristi prilično rijetko, pa nećemo više obraćati pozornost na njega i razmotrit ćemo plutajuće blokove.

Plutajući blokovi

Ti se blokovi ne mogu pozicionirati s preciznošću piksela, kao u prethodnim shemama, ali ova shema pozicioniranja je vrlo česta. Rijetko koja web stranica preživi bez plutajućih blokova, a potpuno je nemoguće napraviti "fluidni" izgled web stranice bez njih.

Takvi se blokovi mogu slobodno kretati po stranici; slike u HTML-u se ponašaju na sličan način, poravnate pomoću parametra poravnati.

Plutajući blokovi definirani su svojstvom lebdjeti, koji određuje hoće li blok lebdjeti iu kojem smjeru će se kretati. Postoje tri opcije:

• lijevo- blok je pritisnut na lijevi rub, preostali elementi teku oko njega s desne strane.


• pravo- blok je pritisnut na desni rub, preostali elementi teku oko njega s lijeve strane.


• nikakav- blok se ne pomiče i postavljen je prema svojstvu položaj.

Pogledajmo primjer. Recimo da imamo HTML stranicu sa sljedećim kodom:

Pozicioniranje blokova

Blok 1 tekst

I stranicu style.css sa sljedećim kodom:

#blok1( border:1px full red; width:150px; height:50px; )

Sada naša stranica u pregledniku izgleda ovako:

Učinimo da naš blok pluta i gurnimo ga do lijevog ruba:

#blok1( border:1px solid red; width:150px; height:50px; float:left; )

Sada gurnimo blok do desnog ruba:

#blok1( border:1px solid red; width:150px; height:50px; float:right; )

Sada naša stranica u pregledniku izgleda ovako:

Što se događa ako na stranici postoji nekoliko plutajućih blokova? Dodajmo još jedan blok našoj html stranici:

Pozicioniranje blokova

Blok 1 tekst

Blokiraj tekst 2

Samo neki elementi na stranici. To može biti samo tekst, poveznice, popisi, slike itd.

I dajte im različite vrijednosti imovine lebdjeti:

#blok1( border:1px full red; width:150px; height:50px; float:left; ) #blok2( border:1px full red; width:150px; height:50px; float:right; )

Sada naša stranica u pregledniku izgleda ovako:

Što ako imaju iste vrijednosti? Na primjer:

#blok1( border:1px full red; width:150px; height:50px; float:left; ) #blok2( border:1px full red; width:150px; height:50px; float:left; )

Tada će drugi blok biti pritisnut uz desni rub prvog bloka:

Situacija će biti slična za iste vrijednosti pravo:

#blok1( border:1px full red; width:150px; height:50px; float:right; ) #blok2( border:1px full red; width:150px; height:50px; float:right; )

Imajte na umu: prvo će blok 1 biti pritisnut na desni rub, a zatim će blok 2 biti pritisnut na njega.

Ali što ako želimo da blokovi budu pritisnuti na desni rub, ali smješteni jedan ispod drugog. Za to postoji nekretnina jasan, koji određuje koje strane plutajućeg bloka ne mogu biti susjedne drugim plutajućim blokovima. Ovo svojstvo može se postaviti na jednu od četiri vrijednosti:

• lijevo- blok bi trebao biti smješten ispod svih lijevih blokova.


• pravo- blok mora biti smješten ispod svih desnih blokova.


• oba- blok mora biti smješten ispod svih plutajućih blokova.


• nikakav- nema ograničenja, ovo je zadana vrijednost.

Postavimo ovo svojstvo za drugi blok u našem posljednjem primjeru:

#blok1( border:1px full red; width:150px; height:50px; float:right; ) #blok2( border:1px full red; width:150px; height:50px; float:right; clear:right; )

Sada je ispalo kako sam htio: jedan blok ispod drugog:

U prethodnoj lekciji stvorili smo stranicu poput ove koristeći apsolutno pozicioniranje:

Pogledajmo kako se to može učiniti pomoću plutajućih blokova. Dakle, kod same stranice je sljedeći:

Pozicioniranje blokova

zaglavlje stranice

Sadržaj

blok vijesti

dnu stranice

Na stranici style.css najprije postavimo dimenzije i pozadinu za naše blokove:

#header( background:darkred; width:715px; height:100px; ) #menu( background:oldlace; width:190px; height:300px; ) #content( background:oldlace; width:525px; height:300px; ) #footer ( background:darkred; width:715px; height:30px; ) #vijest( background:yellow; width:150px; height:280px; )

Sada se naši blokovi nalaze u normalnom toku, tj. jedno pod drugim. Moramo napraviti blokove Jelovnik I sadržaj lebdeći i ljevoruki. blok vijesti treba pritisnuti desni rub, tj. Napravit ćemo to desni plutajući blok:

#header( background:darkred; width:715px; height:100px; ) #menu( background:oldlace; width:190px; height:300px; float:left; ) #content( background:oldlace; width:525px; height:300px ; float:left; ) #footer( background:darkred; width:715px; height:30px; ) #news( background:yellow; width:150px; height:280px; float:right; )

Naša stranica u pregledniku izgleda ovako:

Pogledajmo naš blok vijesti, vidite da se nalazi ispod teksta u bloku sadržaj. Ali htjeli smo da blok vijesti bude s desne strane, a da tekst teče oko njega s lijeve strane.

Zašto nam nije išlo? Jer naš blok vijesti u html kodu nalazi se ispod teksta i oko njega će teći samo tekst koji se nalazi ispod njega. Da bismo to popravili, moramo postaviti svoje div="vijesti" iznad teksta (tj. prije riječi "sadržaj"):

Pozicioniranje blokova

zaglavlje stranice

blok vijesti

Sadržaj

dnu stranice

Sada je naš blok vijesti na svom mjestu:

I kako ne bi pritiskao blizu gornjeg i desnog ruba, dodat ćemo vrijednost margine za ovaj blok:

#vijest( background:yellow; width:150px; height:280px; float:right; margin:10px; )

Sada smo postigli isti rezultat kao i kod apsolutnog pozicioniranja.

Složite se da je pomoću plutajućih blokova lakše postaviti stranicu: ne morate brojati piksele, a kod je kraći. Osim toga, s “fluidnim” rasporedom ne možemo odrediti točnu lokaciju bloka na ekranu, a uz pomoć plutajućih blokova to nam nije potrebno, dovoljno je označiti samo orijentir (lijevo, desno, ispod ili u istom redu).

Fiksni blokovi

Kao što se sjećate, s fiksnim pozicioniranjem, blok je fiksiran u odnosu na područje gledanja. Na neki način, fiksni blokovi slični su okvirima. Pomicanje je dostupno samo unutar okvira, ali ne i unutar bloka.

Fiksni blokovi imaju jedan značajan nedostatak: ne podržavaju ih preglednici Internet Explorer. Stoga ih za sada ne treba koristiti. Stoga ćemo ovdje navesti samo sintaksu takvog pravila, ako ga želite sami isprobati (na primjer, u pregledniku Opera).

#blok( position:fixed; left:0px; top:0px; )

Blok s identifikatorom "blok" ostat će na mjestu prilikom pomicanja stranice.

To je sve za danas. U sljedećoj lekciji ćemo se upoznati s još nekim svojstvima blokova i njihovim vrstama.

Rade sa svim pozicioniranim elementima osim sa statičnima.

Primjer pozicioniranja.

Elementi se mogu preklapati!

Prikaz elementa iznad ostalih!

Svojstvo položaja ima 4 vrijednosti: statičku, fiksnu, relativnu i apsolutnu. Svako od ovih značenja bit će prikazano u nastavku s primjerom upotrebe.

Prije nego što detaljno pogledamo sve vrste pozicioniranja elemenata na stranici, morat ćemo razmotriti što je tijek dokumenata.

Protok dokumenata

Prema zadanim postavkama, elementi na web stranici prikazuju se redoslijedom kojim se pojavljuju u HTML dokumentu, odnosno blok elementi zauzimaju punu širinu koja im je dostupna i složeni su okomito jedan ispod drugog. Inline elementi se redaju horizontalno dok se ne zauzme cijela raspoloživa širina, nakon što se zauzme cijela širina, napravi se prijelom retka i sve počinje ispočetka. Ovakav raspored elemenata naziva se normalan protok(također se zove tijek dokumenata ili opći tok).

Možete koristiti svojstvo float ili position za uklanjanje elementa iz normalnog toka. Ako element "ispadne" iz normalnog toka, tada će elementi koji se nalaze u kodu ispod tog elementa biti pomaknuti na svoje mjesto na web stranici.

Statičko pozicioniranje

Statičko je zadano pozicioniranje svih elemenata na web stranici. Ako ne primijenite svojstvo položaja na element, on će biti statičan i pojavit će se na web stranici prema općem tijeku elemenata.

Prilikom primjene CSS svojstava top , left , right ili bottom na statički pozicioniran element, ona će biti zanemarena.

Ako je potrebno, možete postaviti statičko pozicioniranje u listu stilova koristeći statičku vrijednost:

Prvi paragraf.

Drugi paragraf.

Pokušajte »

Fiksno pozicioniranje

Elementi s fiksnim položajem nalaze se na stranici u odnosu na prozor preglednika. Takvi elementi se uklanjaju iz općeg toka; elementi koji slijede fiksni element u toku će ga ignorirati, pomicati se i zauzimati njegovo mjesto na web stranici.

Vrijedno je obratiti pozornost na činjenicu da elementi s fiksnim položajem mogu preklapati druge elemente, skrivajući ih u potpunosti ili djelomično. Prilikom listanja dugih stranica stvaraju učinak nepomičnih objekata koji ostaju na istom mjestu:

Tekst Tekst Tekst Tekst Tekst Tekst Tekst Neki tekst Tekst Tekst Tekst Tekst Tekst Tekst

Pokušajte »

Relativno pozicioniranje

Relativno pozicionirani elementi, kao i statični elementi, ostaju u općem toku. Kada primijenite svojstva top , left , right ili bottom na relativno pozicionirane elemente, oni će se pomaknuti relativno u odnosu na svoju lokaciju, ostavljajući prazan prostor na mjestu gdje se element izvorno nalazio.

Takvi elementi ne utječu na položaj elemenata koji ih okružuju; preostali elementi ostaju na mjestu i mogu se preklapati relativno postavljenim elementom:

Naslov prve razine.

Relativno pozicioniran naslov.

Naslov treće razine.

Pokušajte »

Napomena: Elementi s relativnim pozicioniranjem (relativno) obično se koriste kao roditelj za elemente s apsolutnim pozicioniranjem (apsolutno).

Apsolutno pozicioniranje

Apsolutno pozicionirani elementi potpuno su uklonjeni iz ukupnog toka, preostali elementi će zauzeti slobodan prostor, potpuno zanemarujući apsolutno pozicionirane elemente. Zatim možete postaviti element gdje god želite na web-stranici pomoću svojstava top, left, right ili bottom.

Svi apsolutno pozicionirani elementi postavljaju se relativno u odnosu na prozor preglednika ili u odnosu na najbližeg pozicioniranog pretka (ako postoji) koji ima svojstvo položaja apsolutno, fiksno ili relativno.

Promijenimo lokaciju logotipa pomoću apsolutnog pozicioniranja.
Logotip će se sada nalaziti u gornjem desnom kutu stranice.

Pokušajte »

Elementi koji se preklapaju

Kada su elementi izvan cjelokupnog tijeka stranice, mogu se međusobno preklapati. Obično redoslijed elemenata odgovara njihovom redoslijedu u HTML kodu stranice, međutim, moguće je kontrolirati redoslijed preklapanja pomoću CSS svojstva z-index , što je njegova vrijednost veća, to će element biti viši.