Posljednje ažurirano: 28.04.2016

CSS pruža mogućnost pozicioniranja elementa, odnosno možemo postaviti element na određeno mjesto na stranici.

Glavno svojstvo koje kontroliše pozicioniranje u CSS-u je svojstvo pozicije. Ovo svojstvo može imati jednu od sljedećih vrijednosti:

statički: standardno pozicioniranje elementa, zadano

apsolutno: element je pozicioniran u odnosu na granice elementa kontejnera ako svojstvo položaja tog elementa nije statičko

relativno: Element je pozicioniran u odnosu na svoju zadanu poziciju. Tipično, glavna svrha relativnog pozicioniranja nije pomicanje elementa, već postavljanje nove točke sidrenja za apsolutno pozicioniranje ugniježđenih elemenata.

fiksno: element je pozicioniran u odnosu na prozor pretraživača, to vam omogućava da kreirate fiksne elemente koji ne mijenjaju poziciju prilikom pomicanja

Ne biste trebali istovremeno primjenjivati ​​svojstvo float i bilo koji tip pozicioniranja osim statičkog (to jest, zadanog tipa) na element.

Apsolutno pozicioniranje

Okvir pregledača ima gornju, donju, desnu i lijevu ivicu. Za svaki od ova četiri ruba postoji odgovarajuće CSS svojstvo: lijevo (odsječak od lijevog ruba), desno (ispuna s desne ivice), gornji (odmak od vrha kontejnera) i donji (odmak od dna ). Vrijednosti ovih svojstava navedene su u pikselima, em ili procentima. Ne morate specificirati vrijednosti za sve četiri strane. Obično se postavljaju samo dvije vrijednosti - gornja margina odozgo i lijeva margina slijeva.

ZDRAVO SVIJETE

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

Nije bitno što postoje drugi elementi nakon ovog diva. Ovaj div će ionako biti pozicioniran u odnosu na granice okvira za pregled pretraživača.

Ako se element s apsolutnim pozicioniranjem nalazi u drugom kontejneru, u kojem, zauzvrat, vrijednost svojstva položaja nije jednaka statičkoj, tada je element pozicioniran u odnosu na granice spremnika:

Relativno pozicioniranje

Relativno pozicioniranje je također specificirano pomoću relativne vrijednosti. Ista svojstva gornjeg, lijevog, desnog i donjeg se primjenjuju kako bi se označila specifična pozicija na koju je element pomaknut:

Svojstvo Z-indeksa

Prema zadanim postavkama, kada se dva elementa obruba podudaraju, element koji je posljednji definiran u html oznaci prikazuje se iznad drugog. Međutim, svojstvo z-index omogućava vam da promijenite redoslijed elemenata kada se preklapaju. Svojstvo uzima broj kao svoju vrijednost. Stavke sa većom vrednošću z-indeksa će se pojaviti na vrhu stavki sa nižim z-indeksom.

Na primjer:

Sada dodajmo novo pravilo u redBlock stil:

RedBlock (z-indeks: 100; pozicija: apsolutna; vrh: 20px; lijevo: 50px; širina: 80px; visina: 80px; boja pozadine: crvena;)

Ovdje je z-indeks 100. Ali ne mora biti 100. Pošto je z-indeks drugog bloka nedefiniran i zapravo je nula, svojstvo z-index možemo postaviti na bilo koju vrijednost veću od nule za redBlock.

I sada će prvi blok biti postavljen na drugi, a ne obrnuto, kao što je bilo na početku.

Prilikom rada s tekstom, korisnik će možda morati zamijeniti rečenice ili cijele pasuse, ili rasporediti fragmente na neki nestandardan način. Postoji nekoliko načina za premještanje bloka teksta u programu Microsoft Office Word.

Instrukcije

Odaberite blok teksta koji želite premjestiti. To se može učiniti pomoću lijevog dugmeta miša ili prečice na tastaturi. Kombinacija Shift i tipki sa strelicama lijevo/desno na tastaturi omogućava vam da odaberete jedan znak za ispis, strelice gore/dolje - jedan red.

Ctrl, Shift i strelica desno/lijevo odabire riječ, a strelicama gore ili dolje odabire se cijeli pasus.

Nakon odabira željenog fragmenta, pomaknite kursor na njega i pritisnite lijevu tipku miša. Držeći ga pritisnutim, povucite blok teksta na poziciju dokumenta koji želite. Otpustite dugme miša.

Druga opcija: odaberite blok i kliknite na odabir desnom tipkom miša. U padajućem izborniku odaberite naredbu "Izreži" - fragment teksta će biti postavljen u međuspremnik. Postavite kursor tamo gde želite da premestite blok i ponovo kliknite desnim tasterom miša. U kontekstnom izborniku odaberite naredbu "Zalijepi".

Komande se mogu pozivati ​​i sa tastature. Prečice Ctrl i X omogućavaju vam da izrežete željeni dio teksta, a tipke Ctrl i V - da ga zalijepite negdje drugdje u dokumentu. Za ovo možete koristiti i dugmad na traci sa alatkama na kartici "Početna".

Ako ste stavili tekst pomoću alata Text Box, morate postupiti drugačije. V u ovom slučaju tekst se postavlja u navedeno područje koje ima ivice. Da biste premjestili takav blok, odaberite ne sam tekst, već okvir oko njega, a zatim povucite ovaj okvir na željeno mjesto držeći lijevu tipku miša. Tekst unutar ivica je sastavni dio objekta "Text Box", kretat će se zajedno sa okvirom.

Kada radite s tekstom u ćelijama tablice, bilo koja od opisanih opcija će biti dobra. Sve zavisi od specifičnih uslova: ponekad je potrebno premjestiti samo dio teksta, ponekad - ćeliju ili nekoliko susjednih ćelija.

Potrebno je premjestiti (povući, okrenuti, itd.) 3 temeljna bloka 300x600x2400 najmanje 3-5 metara. Problem je što se nalaze iza kuće i nema pristupa za dizalicu ili drugu specijalnu opremu.
Kasnije sam htio koristiti blokove za izgradnju verande. Ali sada samo trebam osloboditi mjesto gdje leže - planiram tu nadstrešnicu-sjenicu.
Težina svakog (ako sam dobro izračunao) je oko 1 tona. Imaš li razmišljanja o ovome?

Da, nije lako, ali izvodljivo. Svekar i ja smo uzeli običnu auto dizalicu i nekoliko naizgled cijevi od dva inča i staro gvožđe. Naša tri bloka su takođe ležala na nezgodnom mestu, pomerili smo ih 15 metara.Učinili smo ovo: Ispod ivice bloka (ležali su na boku, tj. na najširoj ivici) iskopali smo rupu, duboku tako da dizalica i ruka su mogli da prođu, tako da je to bilo da zamahne njegovu polugu. Na dno rupe je stavljen mali komad ravne daske kako se dizalica ne bi zaprljala i kako se pod opterećenjem ne bi zabila u zemlju. Nadalje, oni su prilično pristojno podigli blok sa jedne ivice, gurajući ga odozdo pomoću dizalice. Ne znam tačno pod kojim uglom, u odnosu na tlo, ali tako da se nekoliko polumetarskih ostataka cevi može ravnomerno postaviti ispod bloka. Zatim je dizalica spuštena i blok je položen na cijevi i poravnat sa površinom zemlje. Nadalje, u najduži dio cijevi (~ 1,8 m), koji nije bio postavljen ispod bloka, umetnut je pajser (radi krutosti) i ovaj hibrid je korišten kao poluga, zakucavajući ga ispod drugog kraja bloka i podižući ga u odnosu na tlo (povećanje ugla između poluge i tla) gurajući blok kao iz sebe. Princip pomicanja blokova egipatskih piramida. Kao valjci umjesto trupaca korištene su samo cijevi. Ako je tlo tečno, prvo možete staviti dugačke ravne daske ispod cijevi prije spuštanja dizalice kako cijevi ne bi udubile pod teretom bloka. Guramo, ne zaboravljajući da stavimo novu cijev ispod "nosa" bloka, a oslobođenu cijev pripremimo ispod "krme" kao sljedeću ispod nosa.
Ukupno smo ove blokove kotrljali u trajanju od 3 godine svakog ljeta dok ih nismo kotrljali do kapije. Svi su razmišljali o tome kako da ih koriste, ali nikada nisu došli do toga. Naručili smo manipulatora, on ih je natovario na sebe odmah na kapiji i odnio u nepoznatom pravcu, uz naknadu
Poteškoće nastaju na zavojima ako ih ima, ali sve je izvodljivo i ako udarite po cijevi maljem ispod bloka, postavite ih u smjeru i prilagodite položaj bloka polugom sa strane. Samo izgleda teško, a onda se navikneš.

P.S. Vitlo koje smo posebno kupili za ove blokove je puno pomoglo. Kuka za vitlo se može zakačiti za stupove sa ograde (naši su to radili normalno) i vitlom se blokovi mogu provući kroz cijevi do ovih stupova. Blok bi trebao imati 2 ušice od armature, tako da je vitlo zakačeno na njih. Ovo je lakše nego guranje polugom, ali traje duže, a također je potrebno mnogo truda - stalno trčanje da se vitlo ponovo zakači na sljedeći stup.

P.P.S. Objasnio kako je mogao. Ako to - izvini.

Od autora: Pozdrav. Pozicioniranje css elemenata je veoma važna tema u izgradnji sajta. U ovom članku predlažem da ga detaljnije razmotrimo, sve načine pomicanja blokova po web stranici.

Koje su vrste

Ako govorimo o pozicioniranju blok elemenata, onda se ono postavlja pomoću svojstva položaja. Ima četiri značenja i svako zaslužuje posebno razmatranje.

Apsolutno pozicioniranje

Ovo je prva poznata vrsta. 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 staviti nekoliko blok elemenata u nizu u označavanju. Kako će oni postati? Jedan za drugim, a ne drugačije.

Ovo je normalno zadano ponašanje blokova. Ali šta se dešava sa blokom koji ima definisano apsolutno pozicioniranje? Potpuno ispada iz normalnog toka, drugi 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, pomeranje se dešava u odnosu na ivice prozora pretraživača, ali ako roditeljski element ima položaj: relativan, onda se pomak javlja u odnosu na roditeljski blok.

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

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

Element će biti pomaknut u donji desni ugao. Primjećujem da se gornje dugme često radi na ovaj način - samo ga postavljaju apsolutno u sam ugao. Evo još jednog primjera, u kojem vam prvo pokazujem moguće oznake:

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

A sada css stilovi za ovaj isječak:

#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 zapisali relativno pozicioniranje na roditeljski kontejner (relativno - o tome kasnije u članku), a zatim postavili apsolutno pozicioniranje za isti .block element. 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 pogled i piše se ovako - pozicija: relativna. Koordinate se postavljaju sa istim svojstvima kao i za apsolutnu poziciju. Jedina značajna razlika je u tome što element formalno ne ispada iz toka - za njega ima mjesta.

Ova vrijednost funkcionira kao vidljivost: hidden, kada je element skriven sa stranice, ali je prostor ispod njega ostavljen netaknut. Isto se dešava i sa relativnim postavljanjem - blok se može pomeriti bilo gde, ali prostor za njega ostaje prazan i drugi delovi ga neće uzeti.

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

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

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

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

Fiksacija

Sigurno ste na internetu više puta vidjeli na stranicama kada prilikom skrolovanja neki baner nije nestao, već je nastavio biti u vašoj zoni vidljivosti, kao da se drži na jednom mjestu. Ovo se uglavnom radi pomoću fiksnog pozicioniranja. Da biste to učinili, trebate napisati:

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

Posljednja vrsta je statična, ovo je uobičajeno ponašanje blok elemenata. Ne treba je pisati, jer je po defaultu, ali još uvijek morate znati za četvrtu vrijednost. Ponekad se piše sa position: static da se poništi drugačija vrsta pozicioniranja na određenim događajima na web stranici.

Kako da pravilno pozicioniram blokove u css?

Razmotrili smo značenja, 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žete ga koristiti za kreiranje ljepljivih bočnih traka, zaglavlja ili podnožja.

Relativno pozicioniranje može pomoći kada trebate pomaknuti blok malo u odnosu na njegovu poziciju i dalje ga držati u toku. Također je postavljeno na roditeljske blokove za korištenje apsolutnog kretanja za djecu.

Ostali trikovi: centriranje, plutajući blokovi

Svojstvo položaja ne rješava sve probleme s rasporedom blok elemenata. Kako biste, na primjer, kreirali mrežu web stranice koristeći je? Nemam dobrih ideja. Ovdje u pomoć priskaču i 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 nadređenog (float: lijevo, float: desno), dopuštajući da nekoliko elemenata bloka postanu u jednom redu, što je uobičajeno na bilo kojoj lokaciji.

Centriranje se radi ovako: blok treba upisati određenu širinu, a zatim postaviti marginu svojstva: 0 na auto. To je automatska vrijednost koja će je poravnati vodoravno tačno do centra. 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 za web programere. Negdje treba umetnuti ikonu (pozicija: apsolutna), negdje malo podesiti poziciju bloka, ostavljajući mjesto iza nje (pozicija: relativna), a gdje widget fiksirati (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. A savjetujem vam da pogledate i našu, gdje se također pokreće slična tema. (pozicioniranje predmeta)

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. Kao i druga CSS svojstva, kontrola pozicioniranja je dostupna 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 se pojavljuju u HTML izvoru.

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 vrijedi 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 je desno navedeno negativnom vrijednošću, pojavljuje se horizontalna traka za pomicanje. Slično pravilo radi sa vrhom, samo se tiče vertikalne trake za pomicanje.
• Istovremeno, navedena svojstva lijevo i desno formiraju širinu sloja, ali samo ako širina nije navedena. Dodajte svojstvo širine i 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 auto vrijednošću. Zatim, kada sadržaj premaši visinu vidljivog područja, pojavit će se traka za pomicanje. Visina i širina "ramova" se automatski generišu korišćenjem osobina levo, desno za širinu i vrh, dole za visinu istovremeno (primer 3.31).

Primjer 3.31. Izrada analoga okvira

Rezultat ovog primjera prikazan je 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đe koristi za kreiranje različitih efekata, kao što su opisi alata za fotografije. Za razliku od atributa title oznake 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 u zasebnu datoteku i povezati 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 pisati 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. Pošto fiksno podnožje preklapa tekst i sakriva ga, dodali smo 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 se element pomakne u odnosu na svoju prvobitnu poziciju, mjesto koje element zauzima ostaje prazno i ​​nije ispunjeno elementima ispod ili iznad.

Primer 3.36 pokazuje pomeranje teksta naslova nadole 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 često ne koristi, jer postoji niz svojstava koja zapravo obavljaju istu ulogu, na primjer, ista margina. Ali kombiniranje različitih tipova pozicioniranja za ugniježđene slojeve jedna je od najprikladnijih i najpraktičnijih tehnika rasporeda. Ako postavite relativni za roditeljski element, a apsolutan za podređeni element, tada će se promijeniti koordinatni sistem i položaj podređenog elementa će biti naznačen u odnosu na njegov roditelj (slika 3.49).

Rice. 3.49. Lijevo, desno, gornje i donje vrijednosti svojstava 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.