Novietojiet Radinieks - kas tas ir? detalizēts apraksts

Ligzdošanas HTML - ilgstošs process, stingra, bet ļoti radošs. 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 jūs kļūstat pieredzējis coder, katrs jaunpienācējs pavada daudz laika pētot dažādas instrukcijas un specifikācijas gan HTML valodā, un tās sabiedrotā - CSS. Par tieši to, ko 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?

CSS saīsinājums var pārraksta un tulkots krievu valodā kā "kaskādes stila lapas". Tas izklausās diezgan dīvaini - no vienas puses, šķiet skaidrs, un vārdi, un, no otras puses - vispārējais nozīme netiek uzreiz notverti. Sāksim ar vienkāršu - ar stilu. Šī tehnoloģija ļauj pievienot objektus lapā, dažas īpašības attiecībā uz izskatu, ka jūs varat reģistrēties tikai vienu reizi, un izmantot neierobežotu skaitu reižu.

Vārds "tabula" oficiālajā tulkojumā parādījās gandrī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 piemēram, tagad ir mēģināt tos.

Visbeidzot, vārds "Cascade". Fakts ir tas, ka katrs elements var būt vairāki stili, kurus var sajaukt vai pat pārklājas. Šā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ā, šie konflikti nevar pieļaut, bet lielos projektos, piemēram, apjukums notiek diezgan bieži.

Tāpēc tagad, kad viss ir no nosaukuma izriet, aplūkosim vienkāršu piemēru. Pieņemsim, ka jūsu vietne ir daudz pogas, kas veidota noteiktā veidā. Viņiem ir īpašības, piemēram, lielums, ēna, caurspīdību, krāsu. 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 "spīdums".

Kāda pozīcija īpašumu?

Mēs tagad pāriet tieši pie īpašuma stāvokli, par kuras dēļ tika sākta visu šo rakstu. Ja Jūs esat iepazinušies ar angļu valodu, vai arī ir laba intuīcija, tad jums jau vajadzētu būt skaidrs - šis īpašums ir atbildīga par vietu posteni. 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 pozīciju īpašumu?

Mūsu īpašums var pieņemt vairākas atšķirīgas vērtības, ir tikai pieci. Šeit ir īss apraksts par katru:

• Amats Mantot. Šī funkcija ļauj kopēt datus par stāvokli elementa, kas ir vecāks. Piemēram, ja jums ir div ar noteiktā pozīcijā attiecībā pret, tad stājās to ar IMG mantot vērtību arī tiks iestatīts Relatīvais.
• Novietojiet Statisks. Šī vērtība tiek dota visiem elementiem automātiski, ja vien nav norādīts vairāk. Elementi iederas pozīcijā, kā minēts kodu, un nav pieejami dažādi "frills", kas ļauj mainīt savu pozīciju.
• Amats Absolute. Ar šo vērtību pozīcijā īpašums tiek diezgan bieži izmanto gadījumos, kad tas ir nepieciešams, lai izveidotu "peldošo" elementu. Ar doto vērtību īpašumu objektu ir "neredzamas" par citiem komponentiem lapā. Tas nozīmē, ka tie ir izvietoti tā, it kā mūsu absolūtā elements neeksistē. Viņš pats vienmēr būs savā vietā, neatkarīgi no tā, cik tālu ir ritināt lapu.
• Nemainīgā stāvoklī. Daudzos veidos, šī vērtība ir līdzīgs iepriekšējam, taču, kamēr absolūtais elements ir saistīts ar vecākiem, fiksēto izmanto tikai koordinātas augšējā kreisajā stūrī pārlūkprogrammas ekrāna, ignorējot pārējos elementus, kas, pirms tā.
• Visbeidzot, Novietojiet Radinieks. Šī veida vērtības ļauj pozicionēšanas elements attiecībā pret otru, kas var būt noderīga, lai izveidotu pielāgojamie marķējums sauc kopīgs "gumijas". Ar šo īpašumu, prece būs "push" no otras puses, nezaudējot spēju mainīt savu pozīciju lapā.

Darbs ar nostājai dažādās pārlūkprogrammās

Ne visas pārlūkprogrammas ir vienlīdz saderīgi. Lai gan lielākā daļa alternatīvas programmas interneta sērfošanu bez jebkādiem sarežģījumiem uztveramo vērtību nostājas ir absolūti patiess, "hroniski īpašs» Internet Explorer uzskata īpašumu, atkarībā no tās versijas.

Piemēram, izmantojot jau "aprakti" pārlūkprogrammu IE6, jūs nevarat izmantot vērtības, kas noteikta un mantot - "ēzelis", viņi vienkārši ignorēt to. Tomēr, neskatoties uz to, ka septītā versija situācija sāka uzlaboties, un fiksēto jau apstrādāti, lai Mantot mīļoto "pārlūku, lai lejupielādētu citus pārlūkus," sasniedza tikai astoto iemiesojumā.

Novērotāju atpūtas mierīgi rīkoties pozīciju ar pirmo versiju, izņemot operas, kas ir ieguvuši atbalstu no īpašībām tās 4 variācijās, publicēts 90. gadu vidus.

Darbs ar nostājas Javascript

Patiesībā, stāsts par to, kā strādāt ar Pozīcijas īpašuma Javascript ir, esam iekļāvuši tikai dēļ pieklājības normas. Tā kā šis īpašums nav īpašas rakstzīmes nosaukumu, jūs varat izmantot JS bez jebkādām izmaiņām, piemēram, lai iestatītu div pozīciju Relatīvais, jāiekļauj līnijas, piemēram, šis: div.style.position = "relatīvu".

Kā jūs varat redzēt, tas ir diezgan vienkārši.

Kāpēc izvietojums attiecībā pelnījusi īpašu uzmanību?

Lai gan lielākā daļa no īpašuma vērtības nostājā maigi sakot, "pastrīdēties" uz apkārtējiem elementiem, izmantojot vērtību "stila vietu: radinieks", vienmēr jāatceras par visu lapu kopumā, jo nepareizas izmantošanas, var stipri "šķībs" viss saturs ekrāna .

Turklāt šajā viesnīcā tikai ļauj jums viegli konvertēt fiksētu dizaina pielāgojamie, jo tās piemērošana tiks automātiski ietekmēs visus satura lapas. Tad mums vēl ir laiks, lai apsvērtu piemērus un kļūdas, izmantojot šo vērtību, un jūs redzēsiet tās materiālo nozīmi praksē.

Kad Jums vajadzētu izmantot relatīvo izvietojumu?

Papildus tradicionālajam izkārtojumu lapas HTML, pozīciju attiecībā bieži izmanto, lai radītu dažādas interesantas ietekmi. Piemēram, ja jūs vēlaties objektu "nāca" lapā vai, gluži pretēji, pakāpeniski gāja ārpus tās teritorijas, tas ir tieši tas īpašums var palīdzēt īstenot šo "triks".

Šie "viltības", kas īstenoti, izmantojot Javascript, ir, vai, ja jums ir vērsta uz pakāpenisku uzlikšanai, izmantojot īpašības CSS3, kas ļauj jums pielāgot ciklisko izmaiņas vērtības konkrētu mainīgo.

Turklāt dažos gadījumos iespējams izveidot "hibrīda" vērtības pozīciju attiecībā. CSS, bet ne tajā pašā laikā ļauj uzstādīt kaut ko līdzīgu stāvokli: absolūtais radinieks, bet, izmantojot dažus trikus, tas joprojām ir iespējams sasniegt šo efektu. Šī pieeja var būt noderīga, ja jums ir nepieciešams, lai izveidotu kaut ko kompleksu kā rīka padoms vai pop-up izvēlnē. Ņemot vērā piemērus, mēs sniegsim aprakstu struktūras šāda "hibrīda".

Piemēri, izmantojot relatīvo rangu

Novietojiet Radinieks - tas ir diezgan vienkārši, bet elastīgs rīks, kas ļauj jums, lai īstenotu dažādus interesantus efektus. Lai nebūtu jātērē laiks un vieta, kur rakstīt bezjēdzīgi kods veidni, mēs piedāvājam vairākas mutiskas algoritmi, kas var izrotāt savu vietni vai konkrētām lapām.

Sāksim ar "izsmelti" līniju. Pieņemsim, ka jums ir nepieciešama elements, kas būs "ceļošana", jo kreisajā ekrāna malā un lēnām pārvietot to uz labo pusi. Lai ieviestu šādu "mehānismu", vajadzētu noteikt pozīcija: relatīvā; kreisās: -100px, kur -100 - aptuvenu skaits pikseļu veido bloku platums. Šis stils ļauj slēpt vienību ārpus ekrāna, ievietojot to "sākuma stāvoklī." Tagad jūs varat izmantot skriptu, kas palielinās ik pēc dažām milisekundēm kreisi īpašuma vērtību uz vienu vienību, ja vien tas nekļūst vienāds ar platumu pārlūka loga mīnus platumu elementa. Rezultāts ir vienība, kas nāk no kreisās malas, placināti pāri ekrānam un "stāvošām" Viņa labajā rokā.

Vēl viens piemērs ļauj izveidot "radinieks, absolūtās" elementiem. Piemēram, jūs varat ievadīt absolūtais iekšā cits, kam pozīciju attiecībā. Kā rezultātā, mums ir "nosacītu" bloks, kuram nav izmēru, uz kuru absolūtais ir uzrakstīts, tagad var izpausties stāvoklī neatkarīgi no iepriekšējā elementa.

Tipiski kļūdas, lietojot pozīciju attiecībā

Visbiežāk kļūda, izmantojot izvietojums attiecībā ir tas, ka daudzi web dizaineri aizmirst par spēju rezervētu vietu vienībā, kas var atrasties jebkur. Piemēram, ja jums ir diezgan liela, novietot ārpus ekrāna un kam relatīvo izvietojumu, tā vietā būs rēgojās "caurumu". Tomēr pat šis īpašums ir dažkārt rada zināmas neērtības, var izmantot par labu, piemēram, radot interesantu efektu "self-montāža" no vietas, kur visi tās bloku pakāpeniski tiek novietots augšējā pozīcijā: 0; kreisās: 0; t. e. tās sākotnējā atrašanās vietā.