.

Atribut align prilično je svestran i može se primijeniti ne samo na tijelo teksta, već i na naslove poput

. Primjer 1 pokazuje kako postaviti poravnanje u takvom slučaju.

Primjer 1: Poravnanje teksta

Kako uhvatiti lava?

metoda popisivanja

Pustinju dijelimo na nekoliko elementarnih dijelova, čija se veličina podudara s ukupne dimenzije lav, ali manji od veličine kaveza. Zatim, jednostavnim nabrajanjem određujemo područje u kojem se lav nalazi, što automatski dovodi do njegovog hvatanja.

metoda dihotomije

Pustinju dijelimo na dvije polovice. U jednom dijelu je lav, u drugom ga nema. Uzimamo polovicu u kojoj se nalazi lav i ponovno je podijelimo na pola. Tako ponavljamo dok se lav ne uhvati.

Rezultat primjera prikazan je na sl. jedan.

Riža. 1. Poravnajte tekst desno i lijevo

U ovom primjeru, naslov je poravnat sa središtem prozora preglednika, odabrani odlomak je poravnat udesno, a tijelo teksta lijevo.

U programima kao što su Microsoft Word Vjerojatno ste naišli na alate za horizontalno poravnavanje teksta. Tekst možete poravnati lijevo ili desno, centrirano ili poravnati. Isto vrijedi i za CSS - poravnavanje 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 poravnat tekst gotovo uvijek izgleda dobro na web stranicama i lako se čita. Desno poravnanje u europskim se jezicima, u pravilu, rijetko koristi, ali se ne može nazvati potpuno beskorisnim: ovaj je stil koristan za lijep dizajn natpise za fotografije ili citate, poravnavanje sadržaja ćelija tablice ili male fragmente teksta. Centar se često koristi u istu svrhu. Vrijednost justify Justify teksta u CSS-u (justify) može se koristiti za tiskane verzije stranicama, no ne preporuča se zanositi se ovim stilom na web stranicama stvorenim za gledanje na monitoru. Zašto? Na prvi pogled opravdani tekst izgleda lijepo i ravnomjerno, kao kolumna u novinama. Ali da bi ovako rastegnuo tekst, preglednik mora dodati dodatni prostor između riječi, što rezultira ružnim prazninama u tekstu koji otežavaju čitanje. U programima dizajniranim za pripremu podataka za ispis, postoji mnogo više fino podešavanje razmaka u tekstu, kao i često korištenog prelamanja riječi, kojeg nema u mnogim preglednicima. Stoga je potrebno provjeriti koliko opravdan tekst izgleda na web stranicama, a prije svega si postaviti pitanje: je li lako čitljiv? To posebno vrijedi za uske blokove teksta (uključujući mobilne verzije stranice). početne i završne vrijednosti Početne i krajnje vrijednosti za svojstvo poravnanja teksta implementirane su u CSS3 i rade na isti način kao lijevo i desno, ali postoji razlika. Primjenom početne vrijednosti na tekst koji ide s lijeva na desno (LTR - slijeva na desno), poravnanje će biti lijevo (odnosno, za tekst koji ide s desna na lijevo (RTL - zdesna nalijevo), poravnanje će biti ispravno) . Logično, vrijednost kraja funkcionira na suprotan način (odnosno, poravnava desno LTR tekst i lijevo RTL tekst). Ove dvije vrijednosti ne podržavaju neki preglednici, uključujući Internet Explorer, stoga, ako nema hitne potrebe za njihovim korištenjem, preporučamo korištenje lijeve i desne vrijednosti.

Snimke zaslona prikazuju primjere korištenja različita značenja za svojstvo CSS-a za poravnavanje teksta:

Snimka zaslona 1: lijevo poravnati LTR tekst pomoću početne vrijednosti. Sličan izgled može se postići lijevom vrijednošću.
Snimka zaslona 2: Desno poravnanje LTR teksta pomoću krajnje vrijednosti. Sličan izgled može se postići s pravom vrijednošću.
Snimka zaslona 3: Poravnajte tekst. Uz mali font i veliku širinu stranice/bloka, ova opcija za poravnavanje teksta na web stranici izgleda prihvatljivo.
Snimka zaslona 4: povećana veličina fonta i smanjena širina bloka u usporedbi s prethodnim primjerom. Kao što vidite, u tekstu su se pojavile ružne praznine (podvučene crvenom crtom).
Snimka zaslona 5: Dva načina za poravnavanje teksta pomoću primjera mobilne verzije našeg vodiča (lijevo - poravnavanje teksta: lijevo, desno - poravnavanje teksta: poravnavanje). Pokušajte pročitati tekst u oba stupca i odredite koja je opcija ugodnija za čitanje.

Za izgled stranice često se koriste dva glavna alata − pozicioniranje I slobodno kretanje (plutanje). CSS pozicioniranje omogućuje vam da odredite gdje će se pojaviti okvir elementa, dok slobodno kretanje pomiče elemente na lijevi ili desni rub okvira spremnika, dopuštajući ostatku sadržaja da se omota oko njega.

Pozicioniranje i slobodno kretanje elemenata

1. Vrste pozicioniranja

Svojstvo položaja omogućuje vam da točno odredite novu lokaciju okvira, u odnosu na mjesto na kojem bi se nalazio u normalnom toku dokumenta. Prema zadanim postavkama, svi elementi se postavljaju uzastopno 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 uzastopno jedan za drugim redoslijedom kojim su definirani u HTML dokumentu. Koristi se za brisanje bilo koje druge vrijednosti pozicije.
srodnika	Relativno postavljeni element se pomiče iz svog normalnog položaja različitim smjerovima u odnosu na granice roditeljskog spremnika, a prostor koji je zauzimao ne nestaje. Međutim, takav element može se preklapati s drugim sadržajem na stranici. Ako postavite gornje i donje ili lijevo i desno svojstva za relativno pozicioniran element u isto vrijeme, tada će samo vrh raditi u prvom slučaju, a lijevo u drugom. Relativno pozicioniranje omogućuje postavljanje z-indeksa za element, kao i apsolutno pozicioniranje podređenih elemenata unutar bloka.
apsolutna	Apsolutno pozicionirani element potpuno je uklonjen iz toka dokumenta i pozicioniran u odnosu na granice svog bloka spremnika (drugi element ili prozor preglednika). 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 pomoću 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 s drugim elementima (zbog svojstva z-indeksa). Svaki apsolutno pozicionirani element generira blok, odnosno uzima vrijednost prikaza:blok; .
fiksno	Popravlja element na navedenom mjestu na stranici. Blok spremnika fiksnog elementa je okvir za prikaz, odnosno element je uvijek fiksiran u odnosu na prozor preglednika i ne mijenja svoju poziciju tijekom pomicanja po stranici. Sam element je potpuno uklonjen iz glavnog toka dokumenta i kreiran u novom tijeku dokumenta.
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 pomaka

Svojstva opisuju pomak u odnosu na najbližu stranu bloka spremnika. Postavite za elemente kod kojih vrijednost svojstva položaja nije jednaka statičnoj . Mogu imati i pozitivne i negativne vrijednosti. Nije naslijeđena.

Za svojstvo vrha, pozitivne vrijednosti pomiču gornji rub pozicioniranog elementa ispod, a negativne vrijednosti ga pomiču iznad gornjeg ruba njegovog bloka spremnika. 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 spremnika, a negativne vrijednosti ga pomiču van.

3. Pozicioniranje unutar elementa

Blok spremnika apsolutno pozicioniranog elementa postavljen je na položaj: relativan bez pomaka. To vam omogućuje pozicioniranje elemenata unutar elementa spremnika.

.wrap ( padding: 10px; visina: 150px; položaj: relativna; pozadina: #e7e6d4; text-align: right; obrub: 3px isprekidana #645a4e; ) .white (pozicija: apsolutna; širina: 200px; vrh: 10px; lijevo; : 10px; padding: 10px; pozadina: #ffffff; granica: 3px isprekidana #312a22; )
Riža. 2. Apsolutno relativno pozicioniranje

4. Pitanja pozicioniranja

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 je širina ili visina eksplicitno deklarirana, tada će se ova vrijednost dodijeliti.
2. Ako unutar bloka s položajem: apsolutno postoje elementi za koje plutajući omot, tada će visina ovog elementa biti jednaka visini najvišeg od ovih elemenata.
3. Za element s 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 spremnik formiran od područja sadržaja omeđenog granicom. Ako je prednik inline element, blok spremnika formira vanjska granica njegovog sadržaja. Ako nema pretka, element tijela je blok kontejnera.

5. Slobodno kretanje elemenata

U normalnom redoslijedu, elementi na razini bloka prikazuju se počevši od vrha prozora preglednika i idu prema dnu. Svojstvo float omogućuje vam premještanje bilo kojeg elementa, poravnavajući ga s lijeve ili desne strane web stranice ili elementa spremnika 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čeći oko njega.

Riža. 3. Slobodno kretanje elemenata

Plutajući blok mijenja veličinu svog sadržaja s dopunom i obrubom. Gornji i donji margina plutajući elementi se ne urušavaju. Svojstvo float primjenjuje se i na blokove i na inline elemente.

Lijevi ili desni vanjski rub plutajućeg elementa, za razliku od pozicioniranih elemenata, ne može se nalaziti lijevo (ili desno) od unutarnjeg ruba njegovog bloka spremnika, tj. nadilaziti njegove granice. U ovom slučaju, ako je unutarnje punjenje postavljeno za blok spremnika, tada će plutajući blok biti razmaknut od ruba bloka spremnika za navedenu 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-tablice mijenja se u tablicu .

Svojstvo nema utjecaja na elemente s display: flex i display: inline-flex .

Kada koristite svojstvo float na elementima na razini bloka, morate odrediti širinu. Time će preglednik napraviti mjesta za drugi sadržaj. Ali ako je ukupna širina svih stupaca veća od raspoloživog prostora, onda posljednji elementće se spustiti.

Istodobno, okomite margine plutajućih elemenata se ne skupljaju s marginama susjednih elemenata, za razliku od regularnih blok elemenata.

6. Odmotajte elemente

6.1. jasno svojstvo

Svojstvo clear određuje kako će se postaviti element koji slijedi plutajući element. Svojstvo poništava omatanje na jednoj ili obje strane elementa, postaviti svojstvo plutati . Pravilo (preljev: skriveno;) koristi se za sprječavanje prikaza pozadine ili obruba ispod plutajućih elemenata.

6.2. Čišćenje tijeka sa stilovima pomoću klase clearfix i pseudo-klase :after

Recimo da imamo blok kontejner koji nema specificirane širine i visine. Unutar njega je postavljen plutajući blok s 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; ) Riža. 4. "Efekt kolapsa" blok-kontejnera

Rješenje problema:
Kreiramo .clearfix klasu i, u kombinaciji s :after pseudoklasom, 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: oboje; vidljivost: skriveno; )

Druga opcija za brisanje streama:

Clearfix:after (sadržaj: ""; prikaz: tablica; brisanje: oboje; )
Riža. 5. Primjena "clear" metode na blok spremnika koji sadrži plutajući element

6.3. Jednostavan način za čišćenje streama

Postoji još jedan trik za brisanje toka za element koji sadrži float, kao što je horizontalna lista s grafičkim oznakama:

Ul ( margina: 0; stil popisa: nema; padding: 20px; pozadina: #e7e6d4; preljev: 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 Horizontal List Stream

Vlad Merzhevich

Pozicioniranje je položaj elementa u koordinatnom sustavu. Postoje četiri vrste pozicioniranja: normalno, apsolutno, fiksno i relativno. Ovisno o vrsti, koja je postavljena kroz svojstvo položaja, mijenja se i koordinatni sustav.

Zahvaljujući kombinaciji svojstava položaja, lijevo, gornje, desno i donje, 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 relativno drugom i više. Slično drugim svojstvima CSS kontrola pozicioniranje je dostupno putem skripti. Tako možete dinamički mijenjati položaj elemenata bez ponovnog učitavanja stranice, stvaranja animacije i raznih efekata.

Normalno pozicioniranje

Ako svojstvo položaja elementa nije postavljeno ili je njegova vrijednost statična, element se u tijeku dokumenta prikazuje kao normalan. Drugim riječima, elementi se prikazuju na stranici redoslijedom kojim se pojavljuju izvorni kod HTML.

Lijeva, gornja, desna, donja svojstva, ako su definirana, zanemaruju se.

Apsolutno pozicioniranje

Kod apsolutnog pozicioniranja, element ne postoji u toku dokumenta i njegov je položaj relativan u odnosu na rubove preglednika. Ovu vrstu možete postaviti kroz apsolutnu vrijednost svojstva pozicije. Koordinate se određuju u odnosu na rubove prozora preglednika, koji se nazivaju "vidljivo područje" (slika 3.42).

Riža. 3.42. Lijevo, desno, gornje i donje vrijednosti svojstava za apsolutno pozicioniranje

Način rada ima sljedeće značajke.

• Širina sloja, ako nije eksplicitno postavljena, jednaka je širini sadržaja plus vrijednosti margine, obruba i dopuna.
• Sloj ne mijenja svoj izvorni položaj osim ako nema svojstva desno, lijevo, gornje i donje.
• Lijeva i gornja svojstva imaju prednost nad desnim i donjim svojstvima. Ako lijevo i desno proturječe jedno drugome, tada se vrijednost desnog zanemaruje. Isto vrijedi i za dno.
• Ako je lijevo postavljeno na negativnu vrijednost, sloj će ići dalje od lijevog ruba preglednika i traka za pomicanje se neće pojaviti. Ovo je jedan od načina da sakrijete element od pogleda. Isto vrijedi i za gornje svojstvo, samo će sloj ići dalje od gornjeg ruba.
• Ako je lijevo postavljeno na vrijednost veću od širine vidljivog područja ili je postavljeno na desno sa negativnu vrijednost, pojavit će se horizontalna traka svitak. Slično pravilo radi i s vrhom, samo ćemo o tome razgovarati okomita pruga svitak.
• Lijeva i desna svojstva koja su navedena u isto vrijeme čine širinu sloja, ali samo ako širina nije navedena. Vrijedi dodati svojstvo širine a vrijednost prava bit će zanemarena. Isto će se dogoditi s visinom sloja, samo su svojstva vrha, dna i visine već uključena.
• 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 preljeva s auto vrijednost. Zatim, kada sadržaj prijeđe visinu vidljivog područja, pojavit će se traka za pomicanje. Visinu i širinu "okvira" automatski formira istodobna upotreba svojstva lijevo, desno za širinu i vrh, dolje za visinu (primjer 3.31).

Primjer 3.31. Izrada analoga okvira

Proizlaziti ovaj primjer prikazano na sl. 3.43. Sloj zaglavlja se prikazuje u toku kao i obično, a slojevi bočne trake i sadržaja postavljeni su na apsolutno pozicioniranje.

Riža. 3.43. Primjena apsolutnog pozicioniranja

U IE6, apsolutno pozicionirani elementi ne mogu imati istovremeno postavljena svojstva lijevo, desno i gornje, donje.

Apsolutno pozicioniranje također se koristi za stvaranje razni efekti, kao što su opisi alata za fotografije. Za razliku od atribut naslova označiti koji također prikazuje tekst opisa alata, kroz stilove možete kontrolirati izgled teksta koji se prikazuje pomoću skripte.

Prvo, napravimo prazan sloj s ID-om floatTip i definiramo njegov stil. Moraju biti potrebna tri svojstva stila - položaj postavljen na apsolutni , prikaz postavljen na ništa ne skriva sloj, a širina 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 ( pozicija: apsolutna; /* Apsolutno pozicioniranje */ širina: 250px; /* Širina bloka */ prikaz: nema; /* Skrivanje od pogleda */ granica: 1px čvrsta #000; /* Opcije obruba */ padding: 5px ; /* Marža oko teksta */ font-family: sans-serif; /* nazubljeni font */ veličina fonta: 9pt; /* Veličina fonta */ boja: #333; /* Boja teksta */ pozadina: #ECF5E4; /* Boja pozadine */ )

Sama skripta se sastoji od dvije funkcije - moveTip() prati kretanje miša i mijenja položaj sloja prema koordinatama kursora, a toolTip() kontrolira vidljivost sloja i prikazuje željeni tekst u njemu (primjer 3.33).

Primjer 3.33. Izlazna skripta sloja

document.onmousemove = moveTip; funkcija moveTip(e) ( floatTipStyle = document.getElementById("floatTip").style; w = 250; // Širina sloja // Za IE if (document.all) ( x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // Za druge preglednike ) else ( x = e.pageX; // koordinata pokazivača X y = e.pageY; // koordinata pokazivača Y ) // Prikaži sloj s desne strane 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 premjestiti na zasebna datoteka i povežite ga preko src atributa oznake

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 se prelamanje teksta prilikom poziva funkcije toolTip() radi čitljivosti i ima JavaScript sintaksu. U Safariju, skripta ponekad ne radi pri prelamanju teksta, u tom slučaju tekst treba biti napisan u jednom retku. Svojstvo neprozirnosti CSS3 dodano je stilovima, što sloju dodaje malo transparentnosti. Prije IE 9.0 ovo svojstvo nije podržano.

Riža. 3.44. Opis alata renderiran s JavaScriptom

Fiksna pozicija

Fiksni položaj sloja postavljen je vrijednošću položaja fiksnog svojstva i sličan je apsolutnom pozicioniranju. No, za razliku od njega, pričvršćen je na točku na zaslonu koju su odredila svojstva lijevo, gore, desno i dolje i ne mijenja svoj položaj pri pomicanju web stranice. Još jedna razlika od apsolutnog je da kada fiksni sloj ide dalje od vidljivog područja desno ili ispod njega, ne pojavljuju se trake za pomicanje.

Ova vrsta pozicioniranja koristi se za izradu izbornika, kartica, zaglavlja, općenito, svih elemenata koji bi trebali biti fiksirani na stranici i uvijek vidljivi posjetitelju. Primjer 3-35 prikazuje dodavanje podnožja koje ostaje na istom mjestu bez obzira na količinu informacija na web mjestu.

Primjer 3.35. Popravljeni podrum

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultat primjera prikazan je na sl. 3.45. Ukoliko fiksni podrum preklapa tekst i sakriva ga, dodano donji padding za BODY selektor. IE6 ne podržava fiksnu vrijednost, tako da ovaj primjer neće ispravno raditi u tom pregledniku.

Riža. 3.45. Podnožje na dnu stranice

Relativno pozicioniranje

Postavljanje svojstva položaja na relativno postavlja položaj elementa u odnosu na njegov izvorni položaj. Dodavanje svojstava lijevo , gore , desno i dno mijenja položaj elementa i pomiče ga na jednu ili drugu stranu s prvobitnog položaja. Pozitivna lijeva vrijednost definira pomak desno od lijevog ruba elementa, negativna vrijednost određuje pomak ulijevo. Pozitivna vrijednost vrha postavlja pomak elementa prema dolje (slika 3.46), negativna vrijednost - pomak prema gore.

Riža. 3.46. Lijevo i gornje vrijednosti svojstva za relativno pozicioniranje

Donja i desna svojstva imaju suprotan učinak. Ako je vrijednost pozitivna, desno pomiče element lijevo od njegovog desnog ruba, ako je negativna, pomiče se udesno (slika 3.47). Pozitivna donja vrijednost pomaknut će element prema gore, a negativna vrijednost će ga pomaknuti prema dolje.

Riža. 3.47. Desno i donje vrijednosti svojstava za relativno pozicioniranje

Relativno pozicioniranje ima sljedeće značajke.

• Ova vrsta pozicioniranja nije primjenjiva na elemente tablice poput ćelija, redaka, stupaca itd.
• Kada je element pomaknut u odnosu na početna pozicija, prostor koji zauzima element ostaje prazan i nije ispunjen elementima ispod ili iznad.

Primjer 3-36 prikazuje tekst naslova koji se pomiče prema dolje kako bi se dobio poseban stil.

Primjer 3.36. Naslov teksta

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Znanost o fontovima az i buki

Font je sredstvo za izražavanje dizajna, a ne neko banalno štivo.

Rezultat ovog primjera prikazan je na sl. 3.48.

Riža. 3.48. Pomaknite tekst u odnosu na izvornu poziciju

Ugniježđeni slojevi

Obično se samo po sebi relativno pozicioniranje često ne koristi, 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 praktičnih i praktičnih tehnika izgleda. Ako je roditeljski element postavljen na relativno, a za dijete apsolutni, tada će se promijeniti koordinatni sustav i položaj podređeni element ujedno je naznačeno 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 je pozicioniran u donjem desnom kutu sloja blizu granice, zanemarujući svojstvo paddinga.