Amats Relatīvs - kas tas ir? Detalizēts apraksts
HTML izkārtojums ir garš process, rūpīgs,bet ļoti radoša. Neskatoties uz to, ka lielākajai daļai nodarbināto IT, web lapas izkārtojums var likties garlaicīgi rutīnas, speciālisti, kuriem ir aicinājums uz Šādā gadījumā ne tikai kvalitatīvi veikt uzdevumu, bet arī saņemt no procesa materiālo baudu.
Tomēr, pirms kļūtu pieredzējis web dizaineris,katrs jaunpienācējs pavada daudz laika pētot dažādas instrukcijas un specifikācijas gan HTML valodā, un tās sabiedrotā - CSS. Par ko tieši CSS, kas tas ir un ko "izliekties ausīm", ļauj piecelties, kā arī vienu no savām galvenajām īpašībām - Pozīcijas Relatīvais - šodien mēs runājam.
Kas ir CSS?
Vārds "tabulas" oficiālajā tulkojumā izrādījāsgandrīz nejauši - faktiski piemērotāku šeit būtu izmantot vārdu "saraksti" vai "sarakstu", taču autori sākotnējā tulkojuma nolēma, ka CSS izskatās vairāk nekā sarakstā, un kas mēs esam, lai novērtētu tās ir tagad.
Visbeidzot, vārds "kaskāde". Fakts ir tāds, ka katram elementam var būt vairāki stili vienlaikus, kurus var sajaukt vai pat krustot. Šādos gadījumos pārlūkprogramma ir spiesta noteikumu kopumu, lai sacerēt izskatu bloku, kas izrādījās vairāki stili, ar vienu no tiem, piemēram, ir pozīciju attiecībā īpašumu, un otrs - Position Absolūtu. Patiesībā šādus konfliktus nevar pieļaut, bet lielos projektos šāda sajukums notiek diezgan bieži.
Tātad tagad, kad nosaukums ir skaidrs,apskatīsim vienu vienkāršu piemēru. Pieņemsim, ka jūsu vietnē ir liels skaits pogu, kas tiek dekorēts noteiktā veidā. Viņiem ir tādas īpašības kā izmērs, ēna, pārredzamība, krāsa. Protams, jūs varat norādīt šos parametrus, veidojot katras pogas, bet tas ir daudz vieglāk izmantot CSS. Praksē, jums ir nepieciešams, lai aprakstītu noteiktu klasi, kurā uzskaitīti vērtības visām iepriekšminētajām īpašībām, un pēc tam, nevis garš saraksts, tag katra poga būs nepieciešams tikai, lai norādītu nosaukumu klasi, tad pārlūkprogramma pati iekrāsotu šos elementus vēlamo krāsu un dot viņiem pienācīgu "Gloss"
Kāpēc man ir nepieciešams izvietojuma īpašums?
Tagad mēs pārietam tieši uz īpašumuPozīcija, par kuru viss raksts tika iecerēts. Ja esat pazīstams ar angļu valodu vai ir laba intuīcija, tad jums jau jāsaprot, ka šī īpašība ir atbildīga par elementa atrašanās vietu. Faktiski, kā tas ir, bet tā vietā noteikt konkrētu atrašanās vietu, šī īpašuma stāsta pārlūku, kā tas būtu novietot vienu vai citu elementu attiecībā uz blakus vai pāri lapā kopumā.
Kādas vērtības var pozicionēt īpašumu?
Mūsu īpašums var ņemt vairākas atšķirīgas vērtības, no tiem ir tikai pieci. Šeit ir īss apraksts par katru no tiem:
- Pozīcija mantota. Šis īpašums ļauj jums kopēt vienības, kas ir vecāks, atrašanās vietas datus. Piemēram, ja jums ir div ar norādīto Relatīvā pozīcija, iegultā IMG ar IMG ierakstu iegūs arī vērtību Relative.
- Pozīcija statiska. Šo vērtību automātiski piešķir visiem elementiem, ja vien nav noteikts citādi. Elementi ietilpst pozīcijā, kā tie minēti kodā un nav pieejami dažādām "delikatesēm", kas ļauj viņiem mainīt savu pozīciju.
- Amats Absolūts. Šo pozīcijas īpašību vērtību bieži lieto gadījumos, kad ir nepieciešams izveidot "peldošu" elementu. Kam ir šī īpašuma vērtība, elements paliek "neredzams" pārējā lapā. Tas ir, tie atrodas tā, it kā mūsu absolūtais elements vispār vispār nepastāvētu. Viņš pats vienmēr paliks vietā neatkarīgi no tā, cik tālu lapa ir ritināta.
- Pozīcija ir fiksēta. Daudzējādā ziņā šī vērtība ir līdzīga iepriekšējai, tomēr, kamēr absolūtais elements ir piesaistīts vecākam, fiksētais izmanto tikai pārlūka ekrāna augšējā kreisā stūra koordinātas, neņemot vērā citus elementus, kas pirms tam ir.
- Visbeidzot, pozīcija ir relatīva. Šāda veida vērtība ļauj pozicionēt elementu salīdzinājumā ar citiem, un tas var būt noderīgs, veidojot adaptīvo atzīmi, ko parasti sauc par "gumiju". Ņemot šo īpašību, elements "pārvietosies" pārējo, nezaudējot iespēju mainīt atrašanās vietu lapā.
Darbības ar stāvokli funkcijas dažādās pārlūkprogrammās
Ne visas pārlūkprogrammas ir vienādi saderīgas. Kaut arī lielākā daļa alternatīvo programmu interneta pārlūkošanai bez uztveres uztver pozīcijas vērtību, ir pilnīgi taisnība, "hroniski īpašs" Internet Explorer to izvērtē atkarībā no tā versijas.
Piemēram, izmantojot "aprakti" pārlūkuIE6, jūs nevarat izmantot vērtības Fiksētie un Mantot - "ēzeļu" viņi vienkārši ignorē. Tomēr, neskatoties uz to, ka no septītās versijas situācija sāka labot un Fiksētie jau tika apstrādāti, Mantot visiem patika, ka pārlūkprogramma citu pārlūkprogrammu lejupielādēšanai ir pieejama tikai astotajā formā.
Pārējie recenzenti mierīgi apstrādā pozīciju no pirmajām versijām, izņemot Opera, kas iegādājās atbalstu šim īpašumam tās 4. variantā, kas tika izlaists 90. gadu vidū.
Darbs ar pozīciju Javascript
Faktiski stāsts par to, kā strādātar pozīciju īpašumu Javascript mēs iekļāvām tikai labestības labad. Tā kā šim īpašumam nav īpašu rakstzīmju nosaukumā, jūs varat izmantot JS bez jebkādām izmaiņām, piemēram, lai iestatītu attiecības ar Position div, jums vajadzētu iekļaut šo rindu: div.style.position = 'relatīvais'.
Kā redzat, viss ir pavisam vienkāršs.
Kāpēc Relatīvā pozīcija ir pelnījusi īpašu uzmanību?
Kamēr lielākā daļa īpašuma vērtībasPozicionis, maigi sakot, "spļaut" apkārtējiem elementiem, izmantojot vērtību "stila izvietojums: relatīvs", vienmēr ir vērts atcerēties visu lapu kopumā, jo tā nepareiza lietošana var spēcīgi "deformēt" visu ekrāna saturu.
Kad man vajadzētu izmantot relatīvo pozicionēšanu?
Papildus parastajām HTML lapām, pozīcijaiRelatīvs bieži tiek izmantots, lai izveidotu dažādus interesantus efektus. Piemēram, ja vēlaties, lai elements nonāktu pie lapas vai, gluži pretēji, gludi pārietu uz malām, tad šis īpašums var palīdzēt īstenot šo "fēnu".
Līdzīgi "triki" tiek īstenoti ar Javascript palīdzību,vai, ja jūs cenšaties par progresīvu izkārtojumu, izmantojot CSS3 īpašības, kas ļauj pielāgot mainīgās vērtības cikliskām izmaiņām.
Relatīvā pozicionēšanas piemēri
Amats Relatīvs ir diezgan vienkāršs, betelastīgs rīks, kas ļauj jums īstenot daudz interesantu efektu. Lai nezaudētu laiku un vietu, rakstot nevajadzīgus veidņu kodus, mēs nodrošināsim vairākus verbālos algoritmus, kas var dekorēt jūsu vietni vai atsevišķas lapas.
Sāksim ar rindu "beidzies". Pieņemsim, ka jums ir nepieciešams elements, kas "atstās" ekrāna kreisās malas dēļ un pakāpeniski pāriet uz labo pusi. Lai īstenotu šādu "mehānismu", pozīcija: relatīva; pa kreisi: -100px, kur -100 ir aptuvenais pikseļu skaits, kas veido bloka platumu. Šis stils ļaus jums paslēpt bloku ārpus ekrāna, iestatot to uz "sākuma stāvokli". Tagad jūs varat izmantot skriptu, kas palielina kreisā īpašuma vērtību ar vienu reizi ik pēc dažām milisekundēm, līdz tas kļūst vienāds ar pārlūkprogrammas loga platumu, atņemot elementa platumu. Tā rezultātā tiek iegūts bloks, kas parādās no kreisās malas, ruļļi visā ekrānā un "parki" labajā pusē.
Vēl viens piemērs ļauj jums izveidot"Relatīvi-absolūti" elementi. Piemēram, jūs varat ievietot absolūto iekšējo daļu citā, kam ir relatīvā pozīcija. Rezultātā mums ir "relatīvs" bloks, kam nav lieluma, kurā ir uzrakstīts absolūtais, kas tagad var izpausties stāvoklī, kas ir atkarīgs no iepriekšējiem elementiem.
Kopējas kļūdas, lietojot Relatīvā pozīcija
Visizplatītākā kļūda, kadRelatīvā pozīcija ir tāda, ka daudzi maketēšanas dizaineri aizmirst par iespēju rezervēt vietu blokam, kas jebkurā vietā var būt. Piemēram, ja jums ir diezgan liels, novietots ārpus ekrāna un tam ir relatīvs novietojums, tā vietā tiks izveidots "caurums". Tomēr pat šo īpašumu, kas dažkārt rada zināmas neērtības, var izmantot labā, piemēram, radot interesantu sevī "pašmontēšanas" tīmekļa vietnes efektu, kurā pakāpeniski tiek ievietoti visi tā bloki: 0 pozīcija; pa kreisi: 0; t.i., tās sākotnējā vietā.
