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 da 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 ubaciti ikonu (pozicija: apsolutna), negdje malo korigirati poziciju bloka, ostavljajući mjesto iza njega (pozicija: relativna), a gdje widget treba 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
Pilav naroda svijeta
Fergana pilaf
Meso isečeno na komade stavite u kotao i pržite dok se ne stvori korica. Luk nasjeckan na kolutove zajedno sa mesom propržiti do crvenkaste boje, zatim dodati šargarepu narezanu na trakice. Dodajte pola soli, sve promiješajte i pržite dok šargarepa ne porumeni. Nakon toga prelijte polovinom potrebne količine vode i pustite da proključa.
Pokrijte pirinač ujednačenim slojem, pojačajte vatru i odmah sipajte vodu tako da pokrije pirinač za 1-1,5 cm. Čim voda ispari, sakupite pilav površinom, otišao na dno. Zatim poklopite pilav i ostavite da odstoji 20-25 minuta.
Gotov pilaf dobro promiješajte, prebacite u veliku posudu, na vrh rasporedite meso.
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 sa prikaza * / 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 ()" />