CSS pozicioniranje: šta je to i gdje se koristi? Pozicioniranje HTML elemenata.

Gore smo govorili o tome kako možete pozicionirati elemente stranice pomoću tabela. Ali to se također može učiniti pomoću stilova. Među parametrima stila postoje posebna svojstva za pozicioniranje:

• lijevo - za postavljanje udaljenosti u pikselima od lijeve ivice prozora (x-koordinata);
• top - za postavljanje udaljenosti u pikselima od gornje ivice prozora (y-koordinata);
• z-indeks - za označavanje redosleda u kojem će se elementi međusobno preklapati; ovo je nova dimenzija, elementi sa većim z-indeksom će se pojaviti iznad elemenata sa manjim z-indeksom.

Naravno, korištenje ova tri svojstva ne stvara efekat trodimenzionalnog prostora, ali ovo je nešto više od ravne površine. U ovom slučaju govorimo o 2,5-dimenzionalnom prostoru.
Pored svojstava koordinata, potrebno nam je i svojstvo pozicije, koje nam u kombinaciji sa levim i gornjim svojstvima omogućava ugradnju elemenata na određene pozicije prozora. Svojstvo pozicije može imati tri vrijednosti:

• apsolutno - navedena svojstva lijevo i gornje će postaviti element u tačku sa x i y koordinatama u odnosu na gornji lijevi ugao kontejnera (objekt koji sadrži ovaj element). Ako su definirani za element izvan kontejnera, tada će koordinatni početak biti gornji lijevi kut stranice. Imajte na umu da pozicija elementa ne zavisi od pozicije njegove oznake unutar HTML dokumenta;
• relativno - element će biti instaliran prema tome gdje se nalazi izvorni tekst on je u; ova vrijednost je postavljena po defaultu. Na primjer, ako se element nalazi tri reda od početka njegovog odabira u tekstu dokumenta, tada se po defaultu pretpostavlja da je svojstvo pozicioniranja relativno, a svojstva lijeve i gornje koordinate su postavljena na nulte vrijednosti. Vrijednosti koje nisu nula za svojstva lijevo i gornje postavljaju pomak elementa u odnosu na početna pozicija;
• statički - element će biti postavljen na određenu poziciju u odnosu na pozadinu i neće se pomicati prilikom pomicanja stranice.

Sljedeći primjer pokazuje upotrebu svojstva z-index. Iako je u tekstu programa slika opisana iznad ostalih elemenata, dodeljivanjem indeksa sa velikim brojem ona se pomera na vrh prvog teksta. Dakle, upotreba svojstva z-index oslobađa vas okova prirodnog poretka spominjanja elemenata u tekstu HTML programa.

Pozicioniranje




nepBbiu pozicionirani tekst

Rice. 666. Korišćenje svojstva i-index omogućava vam da promijenite prirodni redosljed elemenata u tekstu HTML dokumenta

Prilikom pozicioniranja elemenata može se ispostaviti da dimenzije elementa premašuju dimenzije fragmenta (dodijeljeno područje navedeno u našem primjeru oznakom). Na primjer, tekst ili slika se ne uklapaju u potpunosti u pravougaonik koji je za njih dodijeljen. Za ovaj slučaj postoji svojstvo overwlow. Svojstvo overflow može imati tri vrijednosti:

• ništa (ništa) - ako element ide dalje od fragmenta (prostora koji mu je dodijeljen), i dalje će biti prikazan;
• isječak - dijelovi elementa koji strše izvan granica fragmenta bit će odrezani;
• pomicanje - pomicanje će se koristiti.

IN sljedeći primjer korišteno overflow svojstvo da kreirate mehanizam za pomicanje za prvi tekst.

Pozicioniranje




riepBbiM pozicionirani tekst

Drugo pozicionirani tekst

Rice. 667. Mehanizam skrolujte tekst, implementirano korištenjem svojstva overflow

Naravno, ružne stranice iz prethodnih crteža kreirane su samo da pokažu sposobnost jezika da pozicionira elemente. Vi sami odlučujete koje ćete alate koristiti i za koju svrhu na svojoj web stranici.

Koristeći svojstva pozicioniranja, lako je stvoriti trodimenzionalni efekat za vaše naljepnice. Ideja je da se tekstovi istog sadržaja prikažu malo pomaknuti jedan u odnosu na drugi i obojeni različitim bojama. Pokušajte napisati odgovarajući program kao vježbu. Slika pokazuje otprilike šta bi se trebalo dogoditi. Slika ispod je jedna od moguće opcije program koji kreira "trodimenzionalni" natpis.

Rice. 668. Primjer kreiranja 3D teksta sa koristeći CSS

3d efekat

P (familija fontova: "sans-serif"; veličina fonta: 96, -boja: crvena)
P. highlight (boja: srebrna)
P. sjena (boja: tamnocrvena)

Volumetrijski tekst"

Volumetrijski tekst

Volumetrijski tekst

Imajte na umu da je ovaj način kreiranja efektnih naslova mnogo ekonomičniji od korištenja grafičke datoteke sa sličnim sadržajem.

Postavite poziciju

unapred dogovorenu poziciju

Englesko-ruski rječnik tehnički uslovi. 2005.

Pogledajte šta je "postavljena pozicija" u drugim rječnicima:

instalirati na datu poziciju - — [A.S. Englesko-ruski energetski rječnik. 2006] Energetske teme u opštem položaju EN ...

instalacija u datom položaju - pozicioniranje - [Ya.N.Luginsky, M.S.Fezi Zhilinskaya, Yu.S.Kabirov. Englesko-ruski rečnik elektrotehnike i energetike, Moskva, 1999.] Teme elektrotehnika, osnovni pojmovi Sinonimi pozicioniranje EN pozicioniranje ... Tehnički vodič za prevodioca

Situacija - Situacija ♦ Situacija Situacija se smatra jednom od 10 Aristotelovih kategorija. U ovom slučaju, to znači isto što i mjesto ili pozicija (Place and Position). U zdravom smislu, pozicija bića je udio koji zauzima... ... Sponvilleov filozofski rječnik

RD 153-34.0-09.161-97: Propisi o standardnim energetskim karakteristikama hidrauličnih jedinica i hidroelektrana - Terminologija RD 153 34.0 09.161 97: Propisi o standardnim energetskim karakteristikama hidrauličnih jedinica i hidroelektrana: Visina usisavanja Diflev konvencionalne horizontalne ravni turbine i nivoa repne vode Hs m Definisano iya...

kretanje - 3.14 prijenos (u odnosu na lokaciju skladištenja): Promjena lokacije skladištenja dokumenta. Izvor: GOST R ISO 15489 1 2007: Sistem standarda za informacije... Rečnik-referent pojmova za normativnu i tehničku dokumentaciju

GOST 22267-76: Mašine za rezanje metala. Šeme i metode za merenje geometrijskih parametara - Terminologija GOST 22267 76: Mašine za rezanje metala. Šeme i metode mjerenja geometrijski parametri originalni dokument: 25.1. Metode mjerenja Metoda 1 korištenjem uređaja za mjerenje dužine na pravo kretanje radno tijelo. Metoda 2... ... Rječnik-priručnik pojmova normativne i tehničke dokumentacije

GOST 18101-85: Uzdužne glodalice. Norme tačnosti i krutosti - Terminologija GOST 18101 85: Uzdužne glodalice. Standardi tačnosti i krutosti originalnog dokumenta: 1.2.5. Paralelnost stranica vodećeg žlijeba (kontrolne ivice) stola prema putanji njegovog kretanja. 13 Tabela 5. Dužina... ... Rječnik-priručnik pojmova normativne i tehničke dokumentacije

Mehanički, električni ili elektronski uređaj, ograničavajući mogućnost neovlaštenog korištenja bilo čega. Brava se može aktivirati uređajem (ključem) koji stoji na raspolaganju određenoj osobi, informacijama ... ... Collier's Encyclopedia

Kretanje pod opterećenjem stola u odnosu na trn pričvršćen u vertikalno vreteno - 3.2.1. Kretanje pod opterećenjem stola u odnosu na trn fiksiran u vertikalnom vretenu: a) c vertikalni pravac(duž ose Z); b) u horizontalnom pravcu (duž Y ose). Sranje. 67 Tabela 35 Širina radne površine stola, mm... ... Rječnik pojmova normativne i tehničke dokumentacije

GOST 29108-91: Poluprovodnički uređaji. Integrisana mikro kola. Dio 3. Analogna integrirana kola - Terminologija GOST 29108 91: Poluvodički uređaji. Integrisana mikro kola. Dio 3. Analogni integrisana kola originalni dokument: 2.2.4.3. Vrijeme oporavka ulaznog napona Vremenski interval od date promjene koraka... ... Rječnik pojmova normativne i tehničke dokumentacije

GOST 9152-83: Mašine za rezanje zupčanika za kosne točkove sa kružnim zupcima. Norme tačnosti i krutosti - Terminologija GOST 9152 83: Mašine za rezanje zupčanika za konusne točkove sa kružnim zupcima. Standardi tačnosti i krutosti originalnog dokumenta: 1.3.1. Razmak A+D između kraja prirubnice mjerača i kraja vretena; Definicije pojma iz različiti dokumenti... Rječnik-priručnik pojmova normativne i tehničke dokumentacije

Od autora: Pozdrav. Pozicioniranje css elementi su veoma važna tema u izradi web stranica. U ovom članku predlažem da ga detaljnije pogledamo, sve načine pomicanja blokova po web stranici.

Koje su vrste

Ako govorimo o pozicioniranju blok elemenata, ono se postavlja pomoću svojstva pozicije. Ima četiri značenja i svako zaslužuje posebnu pažnju.

Apsolutno pozicioniranje

Ovo je prvi od poznate vrste. Postavlja se ovako: pozicija: apsolutna. Nakon toga blok gubi svoja uobičajena svojstva i potpuno ispada iz normalnog toka. Šta je ovo stream? Pokušajte postaviti nekoliko blok elemenata u nizu u svoju oznaku. Kako će oni postati? Jedan za drugim, i ništa više.

Ovo je normalno ponašanje blokova po defaultu. Ali šta se dešava sa blokom koji ima definisano apsolutno pozicioniranje? Potpuno ispada iz normalnog toka, ostali blokovi jednostavno prestaju da ga primećuju, kao da nikada nije postojao, ali element ostaje na stranici. Apsolutno pozicioniranje u CSS-u se često koristi za precizno postavljanje dekorativnih elemenata, ikona i drugih dizajnerskih stvari.

Sada se može pomicati koristeći svojstva lijevo, desno, gornje i donje. Podrazumevano, kretanje se dešava u odnosu na ivice prozora pretraživača, ali ako roditeljski element pozicija: relativna je specificirana, tada se pomak javlja u odnosu na roditeljski blok.

Blok ( pozicija: apsolutna; dolje: 0; desno: 0; )

Blokiraj ( pozicija: apsolutna; dno: 0; desno : 0 ;

Element će biti pomjeren u donji desni ugao. Primjećujem da često rade gornje dugme na ovaj način - samo ga postavljaju apsolutno u sam ugao. Evo još jednog primjera u kojem ću prvo pokazati moguće oznake:

< div id = "wrapper" > < div class = "block" > < / div > < / div >

A sada css stilovi za ovaj fragment:

#wrapper( pozicija: relativna; ) .block( pozicija: apsolutna; vrh: 0; desno: 10px; )

#wrapper( položaj: relativan; Blokiraj ( pozicija: apsolutna; vrh: 0; desno : 10px ;

U ovom primjeru prvo smo pisali roditeljskom kontejneru relativno pozicioniranje(relativno - više o tome kasnije u članku), a zatim za isti element.block postavljaju apsolutno. Kao rezultat toga, koordinate će se brojati ne iz samog prozora pretraživača, već od rubova roditeljskog elementa, odnosno bloka omotača.

Relativno pozicioniranje css elemenata

Ovo je sljedeći tip i piše se ovako – pozicija: relativna. Koordinate su određene istim svojstvima kao i za apsolutnu poziciju. Jedina značajna razlika je u tome što element formalno ne ispada iz toka – za njega ostaje prostora.

Rad ove vrijednosti može se uporediti sa vidljivošću: skriveno, kada je element skriven sa stranice, ali prostor ispod njega ostaje netaknut. Ista stvar se dešava i sa relativnim postavljanjem - blok se može pomeriti bilo gde, ali prostor za njega ostaje prazan i neće biti zauzet drugim delovima.

Takođe je važno znati da se pomak ne dešava sa ivica prozora veb pretraživača, već sa mesta gde je blok prvobitno stajao. To je:

Blok (pozicija: relativna; vrh: 10px; desno: 50px; )

Blokiraj ( položaj: relativan; vrh: 10px; desno : 50px ;

Blok će se pomjeriti 50 piksela udesno i 10 ulijevo.

Fiksacija

Vjerovatno ste više puta vidjeli na web stranicama na Internetu kada, prilikom skrolovanja, neki baner nije nestao, već je nastavio biti u vašoj zoni vidljivosti, kao da se zaglavio na jednom mjestu. Ovo se uglavnom implementira pomoću fiksnog pozicioniranja. Da biste to uradili potrebno je da napišete:

Položaj: statičan ili normalan statički položaj

Posljednji tip je statičan, ovo je normalno ponašanje blok elemenata. Ne treba ga specificirati, jer je to po defaultu, ali još uvijek morate znati za četvrtu vrijednost. Ponekad se pozicija: statički zapisuje da nadjača drugu vrstu pozicioniranja kada se određeni događaji dogode na web stranici.

Kako pravilno postaviti blokove u css?

Raspravljali smo o značenjima, ali to nije dovoljno da zatvorimo ovu temu za sebe. Zapravo, morate razumjeti gdje i koje vrste pozicioniranja treba primijeniti. Već sam vam dao primjer sa fiksnim - može se koristiti za kreiranje ljepljivih bočnih stupaca, zaglavlja ili podnožja.

Relativno pozicioniranje pomoći će kada trebate malo pomjeriti blok u odnosu na njegovu poziciju i istovremeno zadržati njegovo mjesto u toku. Također se daje roditeljskim blokovima da koriste apsolutno kretanje za podređene elemente.

Ostale tehnike: centriranje, plutajući blokovi

Svojstvo položaja ne rješava sve probleme s postavljanjem blok elemenata. Kako biste, na primjer, kreirali mrežu web mjesta koristeći je? Nemam dobre ideje. Tu u pomoć priskaču druge nekretnine.

Mreže se često prave pomoću float-a u CSS-u. Svojstvo vam omogućava da gurnete blok na lijevu ili desnu ivicu roditelja (float: lijevo, float: desno), dopuštajući višestruki blok elementi stajati u jednom redu, što se stalno dešava na bilo kojoj lokaciji.

Centriranje se vrši ovako: blok treba snimiti određenu širinu, a zatim postaviti margin property: 0 auto. To je automatska vrijednost koja će je poravnati vodoravno tačno u centar. Naravno, za to mora biti jedini u svojoj liniji, inače ništa neće raditi.

Sve vrste pozicioniranja navedene u ovom članku mogu biti korisne web programeru. Negdje treba ubaciti ikonicu (pozicija: apsolutna), negdje treba malo podesiti poziciju bloka, ostavljajući malo prostora iza njega (pozicija: relativna), a negdje treba popraviti widget (pozicija: fiksna). Općenito, poznavanje ove imovine definitivno neće biti suvišno.

Pa, da biste naučili još više iz svijeta izrade web stranica, svakako se pretplatite na naš blog i primajte nove materijale za obuku. Savjetujem vam i da pogledate našu, gdje se također pokreće slična tema. (pozicioniranje elemenata)

Vlad Merzhevich

Pozicioniranje je 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 pozicije, lijevo, gornje, desno i donje, element se može postaviti jedan na drugi, prikazati u tački s određenim koordinatama, fiksirati na navedena lokacija, odrediti položaj jednog elementa u odnosu na drugi, itd. Slično drugim svojstvima CSS menadžment pozicioniranje je dostupno putem skripti. Tako možete dinamički mijenjati položaj elemenata bez ponovnog učitavanja stranice, kreiranja animacije i raznih efekata.

Normalno pozicioniranje

Ako svojstvo pozicije elementa nije postavljeno ili je njegova vrijednost statična, element se u toku 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

Sa apsolutnim pozicioniranjem, element ne postoji u toku dokumenta i njegova pozicija se postavlja 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 za apsolutno pozicioniranje

Način rada karakteriziraju sljedeće karakteristike.

• Širina sloja, osim ako nije eksplicitno navedena, jednaka je širini sadržaja plus vrijednosti margine, granice i dopuna.
• Sloj ne mijenja svoju originalnu poziciju osim ako nema svojstva desno, lijevo, vrh 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 se odnosi i na svojstvo vrha, samo će sloj ići dalje od gornje ivice.
• Ako je lijevo postavljeno na vrijednost veću od širine vidljivog područja ili je desno navedeno sa negativnu vrijednost, će se pojaviti horizontalna traka skrolujte. Slično pravilo radi i sa vrhom, ali o tome ćemo razgovarati vertikalna pruga skrolujte.
• Istovremeno, navedena svojstva lijevo i desno formiraju širinu sloja, ali samo ako širina nije navedena. Vrijedi dodati širina svojstva a pravo vrijednosti će biti zanemareno. Ista stvar će se desiti sa visinom sloja, samo svojstva top, bottom i height su uključena.
• Apsolutno pozicionirani element pomiče se s dokumentom dok se krećete.

Svojstvo položaja, postavljeno na apsolutno, može se koristiti za kreiranje efekta okvira. Pored apsolutnog pozicioniranja za elemente, potrebno je dodijeliti svojstvo prelivanja 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

Telo apsolutnog pozicioniranja ( margina: 0; ) #sidebar, #content ( position: absolute; ) #sidebar, #content ( overflow: auto; padding: 10px; ) #header (visina: 80px; /* Visina sloja */ background: #FEDFC0; border-bottom: 2px solid #7B5427 ) #header h1 (padding: 20px; margin: 0; ) #sidebar (wire: 150px; background: #ECF5E4; border-right: 1px solid #231F20; top: 82px; ; /* Udaljenost od gornje ivice */ dno: 0 /* Udaljenost od donje */ ) #sadržaj (gore: 82px; /* Udaljenost od gornje ivice */ lijevo: 170px; /* Udaljenost od lijeve ivice; */ dolje: 0 ; 0 ) Pilav naroda svijeta

Pilav u ferganskom stilu

Uzbek pilaf

Sibirski pilav

Italian pilaf

Estonski pilav

Pilaf u američkom stilu

Pilav u indijskom stilu

Pilav u ferganskom stilu

Meso isečeno na komade stavite u kotao i pržite dok se ne stvori korica. Crni luk isečen na kolutiće propržite zajedno sa mesom do crvenkaste boje, a zatim dodajte šargarepu narezanu na trakice. Dodajte pola soli, sve promiješajte i pržite dok šargarepa ne porumeni. Nakon toga nalijte pola potrebne količine vode i pustite da proključa.

Pokrijte pirinač u ravnomjernom sloju, pojačajte vatru i odmah sipajte vodu tako da pokrije pirinač za 1–1,5 cm Čim voda ispari, šupljikavom kašikom sakupite pilav u brežuljku. sredinu, probušite je štapom na nekoliko mjesta tako da je voda na površini otišla do dna. Zatim poklopite pilav i ostavite da odstoji 20-25 minuta.

Gotov pilaf dobro izmiksajte, premjestite u veliku posudu i na vrh stavite meso.

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 apsolutno pozicionirani.

Rice. 3.43. Primjena apsolutnog pozicioniranja

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

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 vrstu teksta koji se prikazuje pomoću skripte.

Prvo, napravimo prazan sloj sa identifikatorom floatTip i definiramo njegov stil. Moraju biti potrebna tri svojstva stila - pozicija sa apsolutnom vrijednošću, prikaz s vrijednošću nijednog sakriva sloj, a širina postavlja širinu sloja pomoću opisa alata. Preostala svojstva se koriste 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 prikaza */ granica: 1px čvrsto #000; /* Parametri okvira */ padding: 5px /* Porodica fontova: sans-serif /* font-size: 9pt /* boja teksta */ pozadina; /* Boja pozadine */ )

Sama skripta se sastoji od dvije funkcije - moveTip() prati kretanje miša i mijenja položaj sloja u skladu sa 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 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 je ((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 zaseban fajl i povežite ga preko src atributa oznake. Konačni kod je prikazan u primjeru 3.34.

Primjer 3.34. Kreiranje opisa alata

Tooltip #floatTip ( pozicija: apsolutna; širina: 250px; prikaz: nijedan; granica: 1px čvrsta #000; padding: 5px; porodica fontova: sans-serif; veličina fonta: 9pt; boja: #333; pozadina: # ECF5E4 Prozirnost: 0,85 /* Transparentnost sloja */ ;

" + "Objektiv: Canon EF 24-105 f/4L IS USM
" + "Bljesak: 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 JavaScript sintaksi. U Safariju, skripta ponekad ne radi pri prelamanju teksta, u tom slučaju tekst treba pisati u jednom redu. CSS3 svojstvo neprozirnosti je dodano stilovima, što sloju dodaje blagu transparentnost. Ovo svojstvo nije podržano u IE prije verzije 9.0.

Rice. 3.44. Objašnjenje prikazano pomoću JavaScripta

Fiksna pozicija

Fiksna pozicija sloja određena je fiksnom vrijednošću svojstva pozicije i po efektu je slična apsolutnom pozicioniranju. Ali za razliku od njega, on se veže za tačku na ekranu koju određuju svojstva lijevo, gore, desno i dolje i ne mijenja svoju poziciju prilikom pomicanja 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 se koristi za kreiranje menija, kartica, zaglavlja, uopšte, bilo kojih elemenata koji treba da budu fiksirani na stranici i uvek vidljivi posetiocu. Primer 3.35 prikazuje dodavanje podnožja koje ostaje na jednom mestu bez obzira na količinu informacija na sajtu.

Primjer 3.35. Fiksni podrum

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Fiksno podnožje BODY ( margin-bottom: 50px; ) #footer (pozicija: fiksna; /* Fiksna pozicija */ lijevo: 0; dolje: 0; /* Donji lijevi ugao */ padding: 10px; /* Margine oko teksta */ pozadina: /* Boja pozadine */ boja: #fff */ širina: 100% /* širina sloja */ ) Sve metode hvatanja lava navedene na sajtu su teoretske; računske metode. Autor ne jamči vašu sigurnost prilikom korištenja i odriče se svake odgovornosti za rezultate. Zapamtite, lav je grabežljivac i opasna životinja! Vlad Merzhevich

Rezultat primjera prikazan je na sl. 3.45. Zbog fiksni podrum prekriva tekst i sakriva ga, dodao je padding na dnu za BODY selektor. IE6 ne podržava fiksnu vrijednost, tako da ovaj primjer tamo neće raditi ispravno.

Rice. 3.45. Podnožje na dnu stranice

Relativno pozicioniranje

Postavljanje svojstva položaja na relativni postavlja položaj elementa u odnosu na njegovu originalnu poziciju. Dodavanjem svojstava lijevo, gornje, desno i donje mijenja se položaj elementa i pomiče se na jednu ili drugu stranu s prvobitne lokacije. Pozitivna lijeva vrijednost specificira pomak udesno od lijeve ivice elementa, negativna vrijednost specificira pomak ulijevo. Pozitivna vrijednost vrha specificira pomak elementa naniže (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. Sa pozitivnom vrijednošću, desno pomiče element lijevo od njegove desne ivice, sa negativnom vrijednošću pomiče ga udesno (slika 3.47). Ako je dno pozitivno, element se pomiče prema gore, a ako je dno negativno, pomiče se prema dolje.

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

Relativno pozicioniranje karakteriziraju sljedeće karakteristike.

• Ova vrsta pozicioniranja se ne odnosi na elemente tabele kao što su ćelije, redovi, kolone itd.
• Kada se element pomakne u odnosu na svoju prvobitnu poziciju, prostor koji je element zauzimao ostaje prazan i nije ispunjen elementima ispod ili iznad njega.

Primjer 3.36 prikazuje tekst naslova koji se pomiče prema dolje kako bi se 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 ( pozicija: relativna; /* Relativno pozicioniranje */ vrh: 0,3em; /* Pomakni dolje */ ) Az i bukve nauke o fontovima

Font je sredstvo za izražavanje dizajna, a ne neka vrsta banalnog čitanja.

Rezultat ovog primjera prikazan je na sl. 3.48.

Rice. 3.48. Pomaknite tekst u odnosu na njegovu originalnu poziciju

Ugniježđeni slojevi

Obično se samo relativno pozicioniranje ne koristi često, jer postoji niz svojstava koja u suštini imaju istu ulogu, na primjer, ista margina. Ali kombinacija različite vrste Pozicioniranje za ugniježđene slojeve jedna je od praktičnih i praktičnih tehnika rasporeda. Ako postavite relativni za roditeljski element i apsolutni za podređeni element, tada se koordinatni sistem mijenja i položaj podređenog elementa je naznačen u odnosu na njegov roditelj (slika 3.49).

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

Koordinate se računaju od unutrašnje ivice granice, vrijednosti polja se ne uzimaju u obzir. Sljedeći primjer postavlja tekst u donji desni kut sloja blizu ivice, zanemarujući svojstvo paddinga.

Tekst