.

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

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

Primjer 1. Poravnanje teksta

Kako uhvatiti lava?

Metoda grube sile

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

Metoda dihotomije

Pustinju dijelimo na dvije polovine. U jednom dijelu je lav, u drugom nije. Uzmite polovinu lava i ponovo je podijelite na pola. Ovo ponavljamo sve dok lav ne bude uhvaćen.

Rezultat primjera prikazan je na sl. jedan.

Rice. 1. Poravnajte tekst desno i lijevo

U ovom primjeru, naslov je poravnat sa središtem prozora pretraživača, odabrani pasus je poravnat udesno, a osnovni tekst je poravnat lijevo.

U programima kao što su npr. Microsoft Word vjerovatno ste vidjeli alate za horizontalno poravnavanje teksta. Tekst možete poravnati lijevo ili desno, po sredini ili po širini. Isto važi i za CSS - poravnavanje teksta se vrši pomoću svojstva poravnanja teksta i odgovarajuće vrijednosti, koje su prikazane u tabeli:

Primjer pisanja 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 evropskim jezicima obično se rijetko koristi, ali se ne može nazvati potpuno beskorisnim: ovaj stil je koristan za prelep dizajn natpisi na fotografijama ili citati, poravnavanje sadržaja ćelija tabele ili mali fragmenti teksta. Centar vrijednosti se često koristi u istu svrhu. Justify value Tekst za poravnavanje u CSS-u se može primijeniti na štampane verzije stranicama, ali se ne preporučuje da se zanosite ovim stilom na web stranicama kreiranim za gledanje na monitoru. Zašto? Na prvi pogled opravdani tekst izgleda lijepo i ravnomjerno, kao kolumna u novinama. Ali da bi proširio tekst na ovaj način, pretraživač mora dodati dodatni prostor između riječi, zbog čega se u tekstu mogu formirati ružne praznine koje otežavaju čitanje. Mnogo više se dešava u programima dizajniranim da pripreme podatke za štampanje. fino podešavanje razmak u tekstu, a često koristi i prelamanje riječi, što nije dostupno u mnogim pretraživačima. Stoga morate provjeriti kako tekst poravnat po širini izgleda na web stranicama i prije svega postaviti sebi pitanje: je li lako čitljiv? Ovo posebno vrijedi za uske blokove teksta (uklj. mobilne verzije stranice). Početne i krajnje vrijednosti Početne i krajnje vrijednosti za svojstvo text-align ugrađene su u CSS3 i rade na isti način kao lijevo i desno, ali postoji razlika. Primjenom početne vrijednosti na tekst koji ide slijeva na desno (LTR - slijeva na desno), poravnanje će biti poravnato slijeva (prema tome, za tekst koji ide s desna na lijevo (RTL - zdesna nalijevo ), poravnanje će biti ispravno) ... Logično, krajnja vrijednost radi na suprotan način (tj. desnim poravna LTR tekst, a lijevom RTL tekstom). Ove dvije vrijednosti nisu podržane od strane nekih pretraživača, uključujući Internet Explorer, stoga, ako nema hitne potrebe za njihovom primjenom, preporučujemo korištenje vrijednosti lijevo i desno.

Snimci ekrana pokazuju primjere korištenja različita značenja za CSS svojstvo text-align:

Snimak ekrana 1: Lijevo poravnavanje LTR teksta pomoću početne vrijednosti. Sličan izgled se može postići lijevom vrijednošću.
Snimak ekrana 2: Desno poravnanje LTR teksta pomoću krajnje vrijednosti. Sličan izgled se može postići s pravom vrijednosti.
Snimak ekrana 3: Poravnavanje teksta po širini. Sa malim ispisom i velikom širinom stranice/bloka, ova opcija za poravnavanje teksta na web stranici izgleda prihvatljivo.
Snimak ekrana 4: Povećana veličina fonta i smanjena širina bloka u odnosu na prethodni primjer. Kao što vidite, pojavile su se ružne praznine u tekstu (podvučene crvenom linijom).
Snimak ekrana 5: Dva načina za poravnavanje teksta u mobilnoj verziji našeg vodiča (lijevo - poravnavanje teksta: lijevo, desno - poravnavanje teksta: poravnavanje). Pokušajte pročitati tekst u obje kolone kako biste utvrdili koja je verzija udobnija za čitanje.

Za raspored stranica često se koriste dva glavna alata - pozicioniranje i slobodno kretanje (plutanje)... CSS pozicioniranje vam omogućava da odredite gdje se pojavljuje okvir elementa, a slobodno plutanje pomiče elemente na lijevu ili desnu ivicu okvira koji ga sadrži, dozvoljavajući ostatku sadržaja da ga „omota“.

Pozicioniranje i slobodno kretanje elemenata

1. Vrste pozicioniranja

Svojstvo pozicije vam omogućava da precizno postavite novu poziciju kutije u odnosu na mjesto na kojem bi se nalazio u normalnom toku dokumenta. Podrazumevano, svi elementi su poredani jedan za drugim redom kojim su definisani u strukturi HTML dokumenta. Imovina se ne nasljeđuje.

pozicija
Značenje:
statički	Zadana vrijednost znači da nema pozicioniranja. Elementi se prikazuju uzastopno jedan za drugim redosledom kojim su definisani u HTML dokumentu. Koristi se za brisanje bilo koje druge vrijednosti pozicioniranja.
relativno	Relativno pozicionirani element se pomiče iz svog normalnog položaja u različitim pravcima u odnosu na granice roditeljskog kontejnera, a prostor koji je zauzimao ne nestaje. Međutim, takav element može preklapati drugi sadržaj na stranici. Ako za relativno pozicioniran element istovremeno postavite gornje i donje ili lijevo i desno svojstva, tada će u prvom slučaju raditi samo vrh, u drugom - lijevo. Relativno pozicioniranje vam omogućava da postavite z-indeks za element kao i apsolutno pozicioniranje djece unutar bloka.
apsolutno	Apsolutno pozicionirani element je potpuno uklonjen iz toka dokumenta i pozicioniran u odnosu na granice svog bloka kontejnera (drugi element ili prozor pretraživača). Blok kontejner za apsolutno pozicionirani element je najbliži roditeljski element čija vrijednost svojstva položaja nije statična. Položaj rubova elementa određuje se korištenjem svojstava pomaka. Prostor koji je takav element zauzimao se skuplja kao da element ne postoji na stranici. Apsolutno pozicionirani element može se preklapati ili preklapati drugim elementima (preko svojstva z-indeksa). Svaki apsolutno pozicionirani element generiše blok, odnosno uzima vrijednost prikaza: blok; ...
fiksno	Zaključava element na navedenu lokaciju na stranici. Blok-kontejner fiksnog elementa je okvir za prikaz, to jest, element je uvijek fiksiran u odnosu na prozor pretraživača i ne mijenja svoju poziciju kada se stranica skroluje. Sam element je potpuno uklonjen iz glavnog toka dokumenta i kreiran u novom toku dokumenta.
početni	Postavlja vrijednost svojstva na zadanu vrijednost.
nasljediti	Nasljeđuje vrijednost svojstva od roditeljskog elementa.

Rice. 1. Razlika između statičkog, relativnog i apsolutnog pozicioniranja

2. Svojstva pomaka

Svojstva opisuju pomak u odnosu na najbližu stranu bloka kontejnera. Postavite za elemente za koje vrijednost svojstva pozicije nije statična. Mogu imati i pozitivne i negativne vrijednosti. Nije naslijeđen.

Za svojstvo vrha, pozitivne vrijednosti pomiču gornju ivicu pozicioniranog elementa ispod, a negativne vrijednosti se pomiču iznad gornje ivice njegovog bloka kontejnera. Za lijevo svojstvo, pozitivne vrijednosti pomiču rub pozicioniranog elementa udesno, a negativne vrijednosti pomiču rub pozicioniranog elementa ulijevo. To jest, pozitivne vrijednosti pomiču element unutar bloka kontejnera, dok negativne vrijednosti pomiču element izvan njega.

3. Pozicioniranje unutar elementa

Za blok kontejnera apsolutno pozicioniranog elementa, položaj: relativno svojstvo je postavljeno bez pomaka. Ovo omogućava da se elementi pozicioniraju unutar elementa kontejnera.

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

4. Problemi sa pozicioniranjem

1. Ako je širina ili visina apsolutno pozicioniranog elementa postavljena na auto, tada će njegova vrijednost biti određena širinom ili visinom sadržaja elementa. Ako je širina ili visina eksplicitno deklarirana, tada će se ova vrijednost dodijeliti.
2. Ako unutar bloka sa položajem: apsolutno postoje elementi za koje je float wrap, tada će visina ovog elementa biti jednaka visini najvišeg od ovih elemenata.
3. Za element sa položaj: apsolutna ili pozicija: fiksna, ne možete postaviti svojstvo float u isto vrijeme, ali za element s položaj: relativno, možete.
4. Ako je prednik pozicioniranog elementa blok element, tada blok-kontejner formira područje sadržaja, ograničeno granicom (borderom). Ako je roditelj inline element, blok kontejner se formira vanjskim rubom njegovog sadržaja. Ako ne postoji roditelj, element tijela je blok kontejnera.

5. Slobodno kretanje elemenata

U normalnom redoslijedu, blok elementi se prikazuju počevši od vrha prozora pretraživača prema dnu. Svojstvo float dozvoljava bilo kojem elementu da pluta tako što ga poravnate s lijeve ili desne strane web stranice ili elementa kontejnera koji sadrži. U ovom slučaju, ostali elementi bloka će ga zanemariti, i inline elementi kretat će se udesno ili ulijevo, oslobađajući prostor za njega i teći oko njega.

Rice. 3. Slobodno kretanje elemenata

Plutajuća kutija mijenja veličinu svog sadržaja pomoću dopuna i ivica. Gornji i donji margin padding plutajući elementi se ne urušavaju. Svojstvo float primjenjuje se i na blok elemente i na inline elemente.

Lijeva ili desna vanjska ivica plutajućeg elementa, za razliku od pozicioniranih elemenata, ne može se nalaziti lijevo (ili desno) od unutrašnje ivice njegovog bloka kontejnera, tj. prevazilaze njene granice. U ovom slučaju, ako su interne margine postavljene za blok kontejnera, tada će plutajući blok biti razmaknut od ruba bloka kontejnera za navedenu udaljenost.

Svojstvo automatski mijenja izračunatu (vidljivu pregledaču) vrijednost svojstva prikaza za prikaz: blok za sljedeće vrijednosti: inline, inline-block, table-row, table-row-group, table-column, table-column-group , tabela-ćelija, tablica-naslov, tablica-zaglavlje-grupa, tablica-podnožje-grupa. Vrijednost inline tablice mijenja se u tablicu.

Svojstvo nema efekta na stavke sa display: flex i display: inline-flex.

Kada koristite svojstvo float za blok elemente, obavezno postavite širinu. Radeći ovo, pretraživač će stvoriti prostor za drugi sadržaj. Ali ako je kombinovana širina svih kolona veća od raspoloživog prostora, onda posljednji elementće pasti.

U isto vrijeme, vertikalne margine aerodinamičnih elemenata se ne skupljaju s marginama susjednih elemenata, za razliku od običnih blok elemenata.

6. Otkažite elemente omotača

6.1. Clear property

Svojstvo clear određuje kako će biti pozicioniran element koji slijedi plutajući element. Svojstvo poništava omatanje na jednoj ili obje strane elementa, postavljeno svojstvom float. Da biste spriječili prikaz pozadine ili granica ispod plutajućih elemenata, koristite pravilo (preljev: skriveno;).

6.2. Brisanje toka sa stilovima koristeći klasu clearfix i: nakon pseudo-klase

Pretpostavimo da imate kutiju za kontejnere koja nema širinu ili visinu. Unutar njega se postavlja plutajući blok sa određenim dimenzijama.

.container (padding: 20px; pozadina: # e7e6d4; granica: 3px isprekidana # 645a4e;) .floatbox (float: lijevo; širina: 300px; visina: 150px; margin-desno: 20px; padding: 0 20px; pozadina: #ffffff ; granica: 3px isprekidana # 666666;) Rice. 4. "Efekat urušavanja" bloka kontejnera

Rješenje:
Kreiramo .clearfix klasu i, u kombinaciji sa: nakon pseudo-klase, primjenjujemo je na blok kontejnera.

.container (padding: 20px; pozadina: # e7e6d4; granica: 3px isprekidana # 645a4e;) .floatbox (float: lijevo; širina: 300px; visina: 150px; margin-desno: 20px; padding: 0 20px; pozadina: #ffffff ; granica: 3px isprekidana # 666666;) .clearfix: after (sadržaj: ""; prikaz: blok; visina: 0; jasno: oba; vidljivost: skriveno;)

Druga opcija za čišćenje toka:

Obriši popravku: poslije (sadržaj: ""; prikaz: tabela; brisanje: oba;)
Rice. 5. Primjena metode "čišćenja" na blok kontejnera koji sadrži plutajući element

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

Postoji još jedna tehnika za brisanje toka za element koji sadrži plutajuće elemente, na primjer, za neuređenu horizontalnu listu:

Ul (margina: 0; stil liste: nema; padding: 20px; pozadina: # e7e6d4; overflow: auto;) li (float: lijevo; širina: calc (100% / 3 - 20px); visina: 50px; margin- desno: 20px; pozadina: #ffffff; granica: 3px isprekidana # 666666;) li: posljednje dijete (margina-desno: 0;) Sl. 6. Brisanje toka horizontalne liste

Vlad Merzhevich

Pozicioniranje se odnosi na položaj elementa u koordinatnom sistemu. Postoje četiri vrste pozicioniranja: normalno, apsolutno, fiksno i relativno. U zavisnosti od tipa, koji se postavlja kroz svojstvo položaja, menja se i koordinatni sistem.

Zahvaljujući kombinaciji svojstava položaja, lijevo, gornje, desno i donje, element se može superponirati jedan na drugi, prikazati u tački sa određenim koordinatama, fiksirati na određenom mjestu, odrediti položaj jednog elementa u odnosu na drugi, itd. 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, kreiranja animacija i raznih efekata.

Normalno pozicioniranje

Ako svojstvo pozicije nije postavljeno za element ili je statičko, element se prikazuje u toku dokumenta kao i obično. Drugim riječima, elementi se prikazuju na stranici redoslijedom kojim idu izvorni kod HTML.

Svojstva lijevo, gore, desno, dolje, ako su specificirana, zanemaruju se.

Apsolutno pozicioniranje

Sa apsolutnim pozicioniranjem, element ne postoji u toku dokumenta i njegova pozicija je relativna u odnosu na ivice pretraživača. Ovaj tip možete postaviti kroz apsolutnu vrijednost svojstva pozicije. Koordinate se određuju u odnosu na ivice prozora pretraživača, koje se nazivaju "vidljivo područje" (slika 3.42).

Rice. 3.42. Lijevo, desno, gornje i donje vrijednosti svojstva kada su pozicionirane na apsolutno

Režim ima sljedeće karakteristike.

• Širina sloja, ako nije eksplicitno postavljena, je širina sadržaja plus vrijednosti margine, granice i dopuna.
• Sloj ne mijenja svoju prvobitnu poziciju ako nema svojstva desno, lijevo, gornje i donje.
• Lijeva i gornja svojstva imaju prednost nad desnim i donjim svojstvima. Ako su lijeva i desna u suprotnosti jedna s drugom, tada se vrijednost desnice zanemaruje. Isto važi i za dno.
• Ako je lijevo postavljeno na negativnu vrijednost, sloj će ići dalje od lijeve ivice pretraživača i traka za pomicanje se neće pojaviti. Ovo je jedan od načina da sakrijete element od pogleda. Isto važi i za svojstvo vrha, samo će sloj proći preko gornje ivice.
• Ako je lijevo postavljeno na vrijednost veću od širine vidljivog područja, ili ako navedete desno sa negativnu vrijednost, će se pojaviti horizontalna traka skrolovanje. Slično pravilo radi sa vrhom, samo o tome ćemo pričati vertikalna pruga skrolovanje.
• Istovremeno, navedena svojstva lijevo i desno formiraju širinu sloja, ali samo ako širina nije navedena. Vrijedi dodati širina svojstva a prava vrijednost će biti zanemarena. Isto će se dogoditi i sa 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 kreiranje efekta okvira. Pored apsolutnog pozicioniranja, elementima se mora dodijeliti svojstvo prelijevanja sa vrijednost auto... Zatim, kada sadržaj pređe visinu vidljivog područja, pojavit će se traka za pomicanje. Visinu i širinu "ramova" automatski generira istovremena upotreba svojstva lijevo, desno za širinu i vrh, dolje za visinu (primjer 3.31).

Primjer 3.31. Izrada analoga okvira

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

Rice. 3.43. Primjena apsolutnog pozicioniranja

U IE6, apsolutno pozicionirani elementi ne mogu biti postavljeni na svojstva lijevo, desno i gornje, donje u isto vrijeme.

Apsolutno pozicioniranje se također koristi za kreiranje razne efekte, na primjer, opisi alata za fotografije. Za razliku od atribut naslova tag koji također prikazuje tekst opisa alata, kroz stilove možete kontrolirati izgled teksta koji se prikazuje pomoću skripte.

Prvo, napravimo prazan sloj sa floatTip ID-om i definiramo njegov stil. Moraju biti potrebna tri svojstva stila - pozicija sa apsolutnom vrijednošću, prikaz s vrijednošću none skriva sloj, a širina postavlja širinu sloja nagoveštaja. Ostala svojstva se koriste na zahtjev programera i namijenjena su za promjenu izgleda sloja (primjer 3.32).

Primjer 3.32. Stil opisa alata

#floatTip (položaj: apsolutna; / * Apsolutno pozicioniranje * / širina: 250px; / * Širina bloka * / prikaz: nema; / * Sakrij na ekranu * / granica: 1px solid # 000; / * Opcije okvira * / padding: 5px ; / * Margine oko teksta * / porodica fontova: sans-serif; / * Isječeni 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 u skladu s koordinatama kursora, a toolTip () kontrolira vidljivost sloja i prikazuje željeni tekst u njemu (primjer 3.33).

Primjer 3.33. Skripta za izlaz sloja

Document.onmousemove = moveTip; funkcija moveTip (e) (floatTipStyle = document.getElementById ("floatTip"). style; w = 250; // Širina sloja // Za IE pretraživač if (document.all) (x = event.x + document.body.scrollLeft ; y = event.y + document.body.scrollTop; // Za druge pretraživače) 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 unutra poseban fajl i povežite ga preko src atributa oznake

Objektiv "+": Canon EF 24-105 f / 4L IS USM
"+" Blic: Canon Speedlite 580 EX
"+" Ekspozicija: 1/125
Otvor blende: 5,6 ")" onmouseout = "toolTip ()" />

Rezultat ovog primjera prikazan je na sl. 3.44. Imajte na umu da prelamanja teksta u pozivu funkcije toolTip () služe za čitljivost i koriste JavaScript sintaksu. U Safariju, skripta ponekad ne radi sa prelamanjem teksta, u kom slučaju tekst treba da bude napisan u jednom redu. Dodano je CSS3 svojstvo neprozirnosti stilovima, što sloju dodaje malo transparentnosti. Prije IE 9.0, ovo svojstvo nije podržano.

Rice. 3.44. Objašnjenje prikazano sa JavaScript-om

Fiksna pozicija

Fiksna pozicija sloja je postavljena svojstvom fiksne pozicije i po efektu je slična apsolutnom pozicioniranju. Ali za razliku od njega, vezuje se za određenu lijevu, gornju, desnu i donju tačku na ekranu i ne mijenja svoju poziciju prilikom pomicanja web stranice. Još jedna razlika od apsolutnog je da kada fiksni sloj napusti vidljivo područje desno ili ispod njega, ne pojavljuju se trake za pomicanje.

Ova vrsta pozicioniranja se koristi za kreiranje menija, kartica, zaglavlja, općenito, svih elemenata koji bi trebali biti zakačeni na stranici i uvijek vidljivi posjetitelju. Primer 3.35 prikazuje dodavanje podnožja, koje ostaje na jednom mestu, bez obzira na količinu informacija na sajtu.

Primjer 3.35. Uređen podrum

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

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

Rice. 3.45. Podnožje na dnu stranice

Relativno pozicioniranje

Ako postavite relativno svojstvo svojstva pozicije, tada je pozicija elementa relativna u odnosu na njegovu originalnu poziciju. Dodavanje lijevih, gornjih, desnih i donjih svojstava mijenja položaj elementa i pomiče ga na jednu ili drugu stranu od prvobitne pozicije. Pozitivna vrijednost za lijevo specificira pomak desno od lijeve ivice elementa, negativna vrijednost specificira pomak ulijevo. Pozitivna vrijednost vrha specificira pomak elementa prema dolje (slika 3.46), negativna vrijednost specificira pomak prema gore.

Rice. 3.46. Lijevo i gornje vrijednosti svojstva za relativno pozicioniranje

Donja i desna svojstva imaju suprotan efekat. Ako je vrijednost pozitivna, desno pomiče element lijevo od njegove desne ivice, ako je negativna, pomiče ga udesno (slika 3.47). Pozitivna vrijednost dna pomiče element gore, a negativna vrijednost ga pomiče dolje.

Rice. 3.47. Desno i donje vrijednosti svojstva za relativno pozicioniranje

Relativno pozicioniranje ima sljedeće karakteristike.

• Ova vrsta pozicioniranja nije primjenjiva na elemente tablice kao što su ćelije, redovi, stupci 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 pokazuje pomak teksta naslova prema dolje kako bi mu se dao poseban stil pisanja.

Primjer 3.36. Naslov teksta

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Az i bukve nauke o fontovima

Pismo je sredstvo za izražavanje dizajna, a ne neko trivijalno čitanje.

Rezultat ovog primjera prikazan je na sl. 3.48.

Rice. 3.48. Pomeranje teksta sa prvobitne pozicije

Ugniježđeni slojevi

Obično se samo relativno pozicioniranje ne koristi često, jer postoji niz svojstava koja zapravo obavljaju istu ulogu, na primjer, ista margina. Ali kombinacija različite vrste pozicioniranje za ugniježđene slojeve jedna je od najprikladnijih i najpraktičnijih tehnika rasporeda. Ako postavite relativan za roditeljski element, a apsolutan za podređeni element, tada će se promijeniti koordinatni sistem i pozicija. podređeni element istovremeno je naznačeno u odnosu na svog roditelja (slika 3.49).

Rice. 3.49. Vrijednosti svojstava lijevo, desno, gornje i donje u ugniježđenim slojevima

Koordinate se broje od unutrašnje ivice granice; vrijednosti polja se ne uzimaju u obzir. V sljedeći primjer tekst je pozicioniran u donjem desnom uglu sloja blizu ivice, zanemarujući svojstvo paddinga.