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 pozicioniranjaSvojstvo 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.
| 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 prihvaća vrijednost prikaza:blok; . |
| 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 elementaZa 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. Apsolutni relativno pozicioniranje
1. Ako je širina ili visina apsolutno pozicioniranog elementa postavljena na auto, 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.
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 elemenata Plutajući blok preuzima dimenzije svog sadržaja, uzimajući u obzir podstavu i obrube. Vrh i dno uvlake margine plutajući elementi se ne urušavaju. 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. Poništi protok oko elemenata 6.1. jasno svojstvoSvojstvo clear određuje kako će se postaviti element koji slijedi plutajući element. Svojstvo poništava omatanje na jednoj ili obje strane elementa, postavljena imovinom plutati 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 :afterPretpostavimo 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
Postoji još jedan trik za čišćenje 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
U programima kao što su npr. Microsoft Word Vjerojatno ste naišli na alate za horizontalno poravnavanje teksta. Možete poravnati tekst ulijevo ili udesno, centrirati ili obostrano. Ista stvar postoji u CSS-u - poravnanje teksta se vrši pomoću svojstva poravnanja teksta i odgovarajuće vrijednosti koje su prikazane u tablici:
Primjer unosa stila:
P ( poravnanje teksta: lijevo; )
Lijevo, desno i središnje vrijednosti Lijevo poravnati tekst gotovo uvijek dobro izgleda na web stranicama i lako ga je čitati. Desno poravnanje se u pravilu rijetko koristi u europskim jezicima, ali se ne može nazvati potpuno beskorisnim: ovaj stil je koristan za prekrasan dizajn natpisi za fotografije ili citate, poravnanje sadržaja ćelija tablice ili malih fragmenata teksta. Središnja vrijednost često se koristi u iste svrhe. Vrijednost justify Justify teksta u CSS-u može se koristiti za tiskane verzije stranicama, no nije preporučljivo zanositi se ovim stilom na web stranicama namijenjenim za gledanje na monitoru. Zašto? Na prvi pogled obostrani tekst izgleda lijepo i ujednačeno, poput kolumne u novinama. Ali da bi se tekst razvukao na ovaj način, preglednik mora dodati dodatni prostor između riječi, zbog čega u tekstu mogu nastati neugledne praznine koje otežavaju čitanje. U programima namijenjenim pripremi podataka za ispis događa se mnogo više. fino podešavanje razmaci u tekstu, a često se koristi i prelamanje riječi, čega nema u mnogim preglednicima. Stoga je potrebno provjeriti kako izgleda justified tekst na web stranicama, a prvo pitanje koje si postavljate jest: je li lako čitljiv? To posebno vrijedi za uske blokove teksta (uklj. mobilne verzije stranice). Početna i krajnja vrijednost Početna i krajnja vrijednost za svojstvo poravnanja teksta implementirane su u CSS3 i rade gotovo isto kao lijevo i desno, ali postoji razlika. Primjenom početne vrijednosti na tekst koji se proteže slijeva na desno (LTR), poravnanje će biti lijevo (odgovarajuće, za tekst koji se proteže zdesna nalijevo (RTL), poravnanje će biti desno). Logično je da krajnja vrijednost radi na suprotan način (odnosno, poravnava LTR tekst udesno, a RTL tekst ulijevo). Ove dvije vrijednosti ne podržavaju neki preglednici, uključujući Internet Explorer, stoga, ako nema hitne potrebe za njihovim korištenjem, preporučujemo korištenje vrijednosti lijevo i desno.Slike zaslona prikazuju primjere korištenja različita značenja za CSS svojstvo poravnanja teksta:
Snimka zaslona 1: Poravnavanje LTR teksta ulijevo pomoću početne vrijednosti. Sličan izgled može se postići korištenjem lijeve vrijednosti. 
Snimka zaslona 2: Poravnanje LTR teksta udesno pomoću krajnje vrijednosti. Sličan izgled može se postići korištenjem prave vrijednosti. 
Snimak zaslona 3: Poravnavanje teksta prema širini. Uz mali font i veliku širinu stranice/bloka, ova opcija za poravnavanje teksta na web stranici izgleda prihvatljivo. 
Snimak zaslona 4: veličina fonta je povećana, a širina bloka je smanjena u usporedbi s prethodnim primjerom. Kao što vidite, pojavile su se ružne praznine u tekstu (podvučeno crvenom linijom). 
Snimak zaslona 5: dva načina za poravnavanje teksta na primjeru mobilne verzije našeg vodiča (lijevo - text-align: lijevo, desno - text-align: justify). Pokušajte pročitati tekst u oba stupca i utvrdite koja je opcija ugodnija za čitanje.
Vlad Merzhevich
Pozicioniranje je položaj elementa u koordinatnom sustavu. Postoje četiri vrste pozicioniranja: normalno, apsolutno, fiksno i relativno. Ovisno o vrsti, koja se postavlja kroz svojstvo position, mijenja se i koordinatni sustav.
Zahvaljujući kombinaciji svojstava položaja, lijevo, gore, desno i dolje, element se može postaviti jedan na drugi, prikazati u točki s određenim koordinatama, fiksirati na određenom mjestu, odrediti položaj jednog elementa u odnosu na drugi, itd. Slično drugim svojstvima CSS upravljanje pozicioniranje je dostupno putem skripti. Dakle, možete dinamički mijenjati položaj elemenata bez ponovnog učitavanja stranice, stvaranja animacija i raznih efekata.
Normalno pozicioniranjeAko svojstvo položaja elementa nije postavljeno ili je njegova vrijednost statična, element se prikazuje u toku dokumenta kao i obično. Drugim riječima, elementi se prikazuju na stranici redoslijedom kojim se pojavljuju izvorni kod HTML.
Svojstva lijevo, gore, desno, dno, ako su definirana, zanemaruju se.
Apsolutno pozicioniranjeKod apsolutnog pozicioniranja element ne postoji u tijeku dokumenta i njegov je položaj postavljen u odnosu na rubove preglednika. Ovu vrstu možete postaviti kroz apsolutnu vrijednost svojstva pozicije. Koordinate su navedene u odnosu na rubove prozora preglednika, koje se nazivaju "vidljivo područje" (Sl. 3.42).
Riža. 3.42. Lijevo, desno, gornje i donje vrijednosti svojstava za apsolutno pozicioniranje
Način karakteriziraju sljedeće značajke.
- Širina sloja, osim ako nije eksplicitno navedena, jednaka je širini sadržaja plus vrijednosti margine, ruba i ispune.
- Sloj ne mijenja svoj izvorni položaj osim ako nema svojstva desno, lijevo, gore i dolje.
- Lijeva i gornja svojstva imaju prednost nad desnim i donjim svojstvima. Ako su ljevica i desnica kontradiktorne jedna drugoj, tada se vrijednost desnice zanemaruje. Isto vrijedi i za dno.
- Ako je lijevo postavljeno na negativnu vrijednost, sloj će ići izvan lijevog ruba preglednika, a traka za pomicanje se neće pojaviti. Ovo je jedan od načina da sakrijete element od pogleda. Isto vrijedi i za svojstvo top, samo će sloj ići preko gornjeg ruba.
- Ako je lijevo postavljeno na vrijednost veću od širine vidljivog područja ili je desno navedeno s negativna vrijednost, pojavit će se horizontalna pruga svitak. Slično pravilo radi i s vrhom, ali razgovarat ćemo o tome okomita pruga svitak.
- U isto vrijeme, navedena svojstva lijevo i desno formiraju širinu sloja, ali samo ako širina nije navedena. Vrijedi dodati svojstvo širine a pravo vrijednosti će biti zanemareno. Isto će se dogoditi s visinom sloja, uključena su samo svojstva top, bottom i height.
- Apsolutno pozicionirani element pomiče se s dokumentom dok se pomiče.
Svojstvo položaja, postavljeno na apsolutno, može se koristiti za stvaranje efekta okvira. Osim apsolutnog pozicioniranja za elemente, morate dodijeliti svojstvo overflow sa vrijednost auto. Zatim, kada sadržaj premaši visinu vidljivog područja, pojavit će se traka za pomicanje. Visina i širina "okvira" automatski se generiraju od strane istodobna uporaba svojstva lijevo, desno za širinu i vrh, dno za visinu (primjer 3.31).
Primjer 3.31. Stvaranje analoga okvira
Tijelo apsolutnog pozicioniranja ( margina: 0; ) #sidebar, #content ( position: absolute; ) #sidebar, #content ( overflow: auto; padding: 10px; ) #header ( height: 80px; /* Visina sloja */ pozadina: #FEDFC0; border-bottom: 2px solid #7B5427; ) #header h1 (padding: 20px; margin: 0; ) #sidebar ( width: 150px; background: #ECF5E4; border-desno: 1px solid #231F20; top: 82px ; /* Udaljenost od gornjeg ruba */ bottom: 0; /* Udaljenost od dna */ ) #content ( top: 82px; /* Udaljenost od gornjeg ruba */ lijevo: 170px; /* Udaljenost od lijevog ruba */ dolje: 0 ; desno: 0; ) Pilav naroda svijeta
Ferganski pilav
Uzbečki pilav
Sibirski pilav
Talijanski pilav
estonski pilav
Pilav na američki način
Pilav na indijski način
Ferganski pilavMeso izrezano na komade stavite u kotao i pržite dok se ne stvori korica. Na kolutiće nasjeckani luk popržiti zajedno s mesom do crvenkaste boje pa dodati mrkvu narezanu na trakice. Dodajte pola soli, sve promiješajte i pržite dok mrkva ne porumeni. Nakon toga uliti pola potrebne količine vode i ostaviti da prokuha.
Prekrijte rižu u ravnomjernom sloju, pojačajte vatru i odmah ulijte vodu tako da rižu prekrije 1-1,5 cm.Čim voda ispari, šupljikavom žlicom sakupite pilav u humak u sredini , probušite ga štapom na nekoliko mjesta tako da je voda na površini, otišla na dno. Zatim poklopite pilav i ostavite da odstoji 20-25 minuta.
Gotov pilav dobro izmiješajte, prebacite u veliku posudu, a na vrh stavite meso.
Proizlaziti ovaj primjer prikazano na sl. 3.43. Sloj zaglavlja prikazuje se u streamu kao i obično, a bočna traka i slojevi sadržaja pozicionirani su apsolutno.
Riža. 3.43. Primjena apsolutnog pozicioniranja
U IE6, apsolutno pozicionirani elementi ne mogu imati svojstva lijevo, desno i gore, dno istovremeno.
Za kreiranje se također koristi apsolutno pozicioniranje razne efekte, na primjer, opise za fotografije. Za razliku od atribut naslova označiti koji također prikazuje tekst opisa alata, kroz stilove možete kontrolirati vrstu teksta prikazanog pomoću skripte.
Prvo, stvorimo prazan sloj s identifikatorom floatTip i definirajmo njegov stil. Tri svojstva stila moraju biti obavezna - position s vrijednošću absolute, display s vrijednošću none skriva sloj, a width postavlja širinu sloja s opisom alata. Preostala svojstva koriste se na zahtjev programera i namijenjena su za promjenu dizajna sloja (primjer 3.32).
Primjer 3.32. Stil opisa alata
#floatTip ( položaj: apsolutni; /* Apsolutno pozicioniranje */ širina: 250px; /* Širina bloka */ prikaz: ništa; /* Skrivanje od prikaza */ obrub: 1px solid #000; /* Parametri okvira */ padding: 5px ; /* Margine oko teksta */ font-family: sans-serif; /* Serif font */ font-size: 9pt; /* Veličina fonta */ boja: #333; /* Boja teksta */ pozadina: #ECF5E4; /* Boja pozadine */ )
Sama skripta sastoji se od dvije funkcije - moveTip() prati kretanje miša i mijenja položaj sloja u skladu s koordinatama kursora, a toolTip() kontrolira vidljivost sloja i prikazuje željeni tekst u njemu (primjer 3.33).
Primjer 3.33. Skripta izlaznog sloja
Document.onmousemove = moveTip; funkcija moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // Širina sloja // Za IE preglednik if (document.all) ( x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // Za druge preglednike ) else ( x = e.pageX; // X koordinata kursora y = e.pageY; // Y koordinata kursora ) // Prikaži sloj desno od kursora ako ((x + w + 10)< document.body.clientWidth) { floatTipStyle.left = x + "px"; // Показывать слой слева от курсора } else { floatTipStyle.left = x - w + "px"; } // Положение от верхнего края окна браузера floatTipStyle.top = y + 20 + "px"; } function toolTip(msg) { floatTipStyle = document.getElementById("floatTip").style; if (msg) { // Выводим текст подсказки document.getElementById("floatTip").innerHTML = msg; floatTipStyle.display = "block"; // Показываем слой } else { floatTipStyle.display = "none"; // Прячем слой } }
Radi praktičnosti i svestranosti, skriptu treba staviti u zasebna datoteka i spojite ga preko src atributa oznake. Konačni kod je prikazan u primjeru 3.34.
Primjer 3.34. Stvaranje opisa alata
Opis alata #floatTip (položaj: apsolutni; širina: 250 px; prikaz: nijedan; obrub: 1 px solid #000; padding: 5 px; obitelj fonta: sans-serif; veličina fonta: 9pt; boja: #333; pozadina: # ECF5E4 ; neprozirnost: 0,85; /* Prozirnost sloja */ )
" + "Objektiv: Canon EF 24-105 f/4L IS USM
" + "Bljeskalica: Canon Speedlite 580 EX
" + "Brzina zatvarača: 1/125
Otvor blende: 5,6")" onmouseout="toolTip()" />
Rezultat ovog primjera prikazan je na sl. 3.44. Imajte na umu da je prelamanje teksta prilikom pozivanja funkcije toolTip() u svrhu čitljivosti i u sintaksi JavaScripta. U Safariju skripta ponekad ne radi prilikom prelamanja teksta, u tom slučaju tekst bi trebao biti napisan u jednom retku. CSS3 svojstvo neprozirnosti dodano je stilovima, što dodaje blagu prozirnost sloju. Ovo svojstvo nije podržano u IE-u prije verzije 9.0.
Riža. 3.44. Opis alata prikazan pomoću JavaScripta
Fiksni položajFiksni položaj sloja određen je fiksnom vrijednošću svojstva položaja i po učinku je sličan apsolutnom pozicioniranju. Ali za razliku od njega, veže se za točku na ekranu određenu svojstvima lijevo, gore, desno i dno i ne mijenja svoj položaj prilikom pomicanja web-stranice. Još jedna razlika od apsolutnog je da kada fiksni sloj ide izvan vidljivog područja desno ili ispod njega, ne pojavljuju se trake za pomicanje.
Ova vrsta pozicioniranja koristi se za kreiranje izbornika, kartica, zaglavlja, općenito svih elemenata koji trebaju biti fiksni na stranici i uvijek vidljivi posjetitelju. Primjer 3.35 prikazuje dodavanje podnožja koje ostaje na jednom mjestu bez obzira na količinu informacija na stranici.
Primjer 3.35. Uređeni podrum
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Fiksno podnožje BODY ( margin-bottom: 50px; ) #footer ( position: fixed; /* Fiksni položaj */ lijevo: 0; bottom: 0; /* Donji lijevi kut */ padding: 10px; /* Margine oko teksta */ pozadina: #39b54a; /* Boja pozadine */ boja: #fff; /* Boja teksta */ širina: 100%; /* Širina sloja */ ) Sve metode hvatanja lavova navedene na stranici su teoretske i temeljene na računske metode. Autor ne jamči vašu sigurnost pri korištenju i odbija svaku odgovornost za rezultate. Zapamtite, lav je grabežljivac i opasna životinja! Vlad Merzhevich
Rezultat primjera prikazan je na sl. 3.45. Jer fiksni podrum prekriva tekst i skriva ga, dodao je ispunu na dnu za selektor BODY. IE6 ne podržava fiksnu vrijednost, tako da ovaj primjer tamo neće ispravno raditi.
Riža. 3.45. Podnožje na dnu stranice
Relativno pozicioniranjePostavljanjem svojstva position na relative postavlja se položaj elementa u odnosu na njegov izvorni položaj. Dodavanjem svojstava lijevo, gore, desno i dno mijenja se položaj elementa i pomiče ga na jednu ili drugu stranu s izvorne lokacije. Pozitivna lijeva vrijednost specificira pomak udesno od lijevog ruba elementa, negativna vrijednost specificira pomak ulijevo. Pozitivna vrijednost vrha označava pomak elementa prema dolje (Sl. 3.46), negativna vrijednost označava pomak prema gore.
Riža. 3.46. Lijevo i gornje vrijednosti svojstva za relativno pozicioniranje
Donja i desna svojstva imaju suprotan učinak. S pozitivnom vrijednošću, desno pomiče element ulijevo od njegovog desnog ruba, s negativnom vrijednošću, pomiče ga udesno (slika 3.47). Pozitivna donja vrijednost pomiče element prema gore, negativna donja vrijednost pomiče ga prema dolje.
Riža. 3.47. Desno i donje vrijednosti svojstva za relativno pozicioniranje
Relativno pozicioniranje karakteriziraju sljedeće značajke.
- Ova vrsta pozicioniranja ne odnosi se na elemente tablice kao što su ćelije, redovi, stupci itd.
- Kada je element pomaknut u odnosu na početni položaj, prostor koji zauzima element ostaje prazan i ne ispunjavaju ga elementi ispod ili iznad njega.
Primjer 3.36 prikazuje tekst naslova koji se pomiče prema dolje kako bi dobio drugačiji stil pisanja.
Primjer 3.36. Naslov teksta
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Naslov H1 (font: bold 2em Arial, Tahome, sans-serif; /* Opcije fonta */ boja: #fff; pozadina: #375D4C; padding: 0 10px; ) H1 SPAN (položaj: relativan; /* Relativno pozicioniranje */ vrh: 0,3em; /* Pomakni dolje */ ) Az i bukve znanosti o fontovima
Font je sredstvo izražavanja dizajna, a ne nekakvo banalno štivo.
Rezultat ovog primjera prikazan je na sl. 3.48.
Riža. 3.48. Pomaknite tekst u odnosu na izvorni položaj
Ugniježđeni slojeviObično se samo relativno pozicioniranje ne koristi često, budući da postoji niz svojstava koja zapravo imaju istu ulogu, na primjer, ista margina. Ali kombinacija različiti tipovi Pozicioniranje za ugniježđene slojeve jedna je od prikladnih i praktičnih tehnika rasporeda. Ako postavite relativno za nadređeni element i apsolutno za dijete, promijenit će se koordinatni sustav i položaj element djeteta u ovom slučaju, naznačeno je u odnosu na svog roditelja (Slika 3.49).
Riža. 3.49. Lijevo, desno, gornje i donje vrijednosti svojstava u ugniježđenim slojevima
Koordinate se broje od unutarnjeg ruba granice; vrijednosti polja se ne uzimaju u obzir. U sljedeći primjer tekst se postavlja u donji desni kut sloja blizu ruba, zanemarujući svojstvo padding.
Tekst
