Դիրքորոշումը Հարաբերական - ինչ է դա: մանրամասն նկարագրությունը

Nesting HTML - երկարատեւ գործընթաց է, մռայլ, բայց շատ ստեղծագործական: Չնայած այն հանգամանքին, որ մարդկանց մեծամասնության զբաղվածների ՏՏ, վեբ էջեր դասավորությունը կարող է թվալ ձանձրալի ռեժիմ, մասնագետներ, որոնք ունեն մասնագիտություն նման դեպքում, ոչ միայն որակապես իրականացնել առաջադրանքը, այլեւ ստանալ գործընթացում շոշափելի հաճույքով:

Սակայն, նախքան դուք դառնալ փորձառու coder, յուրաքանչյուր նորեկ ծախսում է շատ ժամանակ ուսումնասիրող տարբեր հրահանգներին եւ առանձնահատկությունները, այնպես էլ HTML լեզվով, եւ իր դաշնակից CSS. Օգտվողի հենց ինչ CSS, թե ինչ է այն եւ ինչ «Շինծու ականջները» թույլ է տալիս Ձեզ ստանալ մինչեւ, ինչպես նաեւ իր լավագույն հատկությունների - պաշտոնը Հարաբերական - այսօր կխոսենք:

Թե ինչ է CSS- ը:

CSS հապավումը կարող է արտագրել եւ թարգմանվել է ռուսերեն, քանի որ «Cascading Style թերթ»: Այն հնչում է բավականին տարօրինակ է, մի կողմից, ակնհայտ է դառնում, եւ բառերը, եւ մյուս գեներալը նշանակում է ոչ թե անմիջապես գրավել: Սկսենք այն պարզ - ի հետ ոճը. Այս տեխնոլոգիան թույլ է տալիս Ձեզ կցել օբյեկտները էջում որոշակի հատկանիշներ վերաբերյալ տեսքը, որ դուք կարող եք միայն գրանցելու մեկ անգամ, եւ օգտագործել մի անսահման թվով անգամ.

Բառը "սեղան" - ի պաշտոնական թարգմանության հայտնվել գրեթե պատահական, ըստ էության, ավելի տեղին է այստեղ կլինի դուք ասում եք "ցուցակները» կամ «ցուցակները», սակայն հեղինակները բուն թարգմանության որոշել է, որ CSS- ը կարծես ավելի քան մեկ ցուցակով, եւ ով ենք մենք այդպիսին է այժմ փորձում է դրանք:

Վերջապես, ինչպես դուք ասում եք "Կասկադ" Փաստն այն է, որ յուրաքանչյուր տարր կարող է ունենալ մի քանի ոճեր, որոնք կարող են լինել խառը կամ նույնիսկ իրար. Նման դեպքերում, որ բրաուզերը պետք է դիմել մի շարք կանոնների, որպեսզի ստեղծագործել տեսքը բլոկի, որը, ինչպես պարզվեց, մի քանի ոճեր, որոնցից մեկը, օրինակ, ունի դիրքորոշումը հարաբերական գույքը, իսկ մյուսը `Պաշտոն բացարձակ: Ի դեպ, նման հակամարտությունները չեն կարող հանդուրժել, բայց խոշոր նախագծերում, ինչպիսիք շփոթություն է տեղի ունենում բավական հաճախ.

Այնպես որ, հիմա, երբ ամեն ինչ պարզ է, որ անունը, եկեք նայենք մի պարզ օրինակ. Եկեք ասում են, ձեր կայքը պետք է լինի մեծ թվով կոճակներ, որը նախատեսված է որոշակի ձեւով: Նրանք ունեն հատկություններ, ինչպիսիք են չափի, ստվերային, անթափանցիկություն, գույնի. Իհարկե, դուք կարող եք ձեւակերպել այդ պարամետրերի, ստեղծելով յուրաքանչյուր կոճակը, բայց դա շատ ավելի հեշտ է օգտագործել CSS. Գործնականում, դուք պետք է նկարագրելու մի որոշակի դաս, որը թվարկում արժեքները բոլոր վերը նշված հատկությունների, եւ ապա, փոխարենը մի երկար ցանկ, պիտակների յուրաքանչյուր կոճակը միայն պետք է նշեք անունը դասի, ապա դիտարկիչը ինքը գունավոր այդ տարրերը ցանկալի գույնի եւ տալ նրանց պատշաճ «փայլ»:

Ինչ է Պաշտոն գույքը:

Մենք այժմ անցնել ուղղակիորեն սեփականության պաշտոնի, հանուն որի սկսված այս ամբողջ հոդվածը: Եթե դուք ծանոթ անգլերեն լեզվով, կամ պետք է լավ ինտուիցիա, ապա դուք պետք է լինի պարզ, - այս գույքը պատասխանատու է համար, գտնվելու վայրը կետում: Ըստ էության, այդպես է, բայց դրա փոխարեն որոշել, թե կոնկրետ տեղադրությունը, այս գույքը պատմում է բրաուզերի, թե ինչպես այն պետք է տեղադրված մեկ կամ մեկ այլ տարր կապակցությամբ հարեւանությամբ կամ ամբողջ էջը, որպես ամբողջություն.

Թե ինչ արժեք կարող է Պաշտոն գույքը:

Մեր գույքը կարող է ընդունել մի քանի տարբեր արժեքները, կան միայն հինգ. Ահա համառոտ նկարագրությունը յուրաքանչյուրը

• Պաշտոն Ժառանգել: Այս հատկությունը թույլ է տալիս Ձեզ պետք է պատճենեք տվյալների վրա պաշտոնում այն տարրը, որը մի ծնող: Օրինակ, եթե դուք ունեք մի div հովացուցիչներ դիրքորոշումը հարաբերական, ապա մտնելով հետ IMG ժառանգեն արժեքով համար նաեւ պետք է սահմանված է Հարաբերական.
• Դիրքորոշումը Ստատիկ: Այս արժեքը տրվում է բոլոր տարրերի ինքնաբերաբար, քանի դեռ հայտարարել է այլեւս: Տարրերը տեղավորվում դիրքում, ինչպես նշված է օրենսգրքի եւ հասանելի չեն մի շարք «երեվակայել», որը թույլ է տալիս փոխել իրենց դիրքորոշումը:
• Պաշտոն Բացարձակ: Ըստ այս արժեքի Պաշտոն գույքը բավականին հաճախ օգտագործվում է այն դեպքերում, երբ դա անհրաժեշտ է ստեղծել «լողացող» տարր. Տվյալ գույքի արժեքի կետի է «անտեսանելի» համար այլ բաղադրիչների էջում: Այսինքն, նրանք կարող են կազմակերպվում, քանի որ եթե մեր բացարձակ տարր գոյություն չունի: Նա ինքը միշտ պետք է տեղում, անկախ նրանից, թե որքան հեռու են scrolled էջը:
• Պաշտոն Հաստատուն. Շատ ձեւերով, այդ արժեքը նման է նախորդ մեկ, սակայն, իսկ բացարձակ տարրը պարտավորվում է ծնողի, ֆիքսված օգտագործում են միայն կոորդինատներն վերին ձախ անկյունում բրաուզերի էկրանին, անտեսելով մնացած տարրերից, որոնք նախորդել են այն:
• Վերջապես, Պաշտոն Հարաբերական. Այս տիպը արժեքները թույլ է տալիս դիրքավորումը տարր հարաբերական է, մյուսը, որը կարող է օգտակար լինել ստեղծելով adaptive պիտակավորումը կոչվում է ընդհանուր «ռետինե»: Այս սեփականության, ապա նյութը «հրում», մյուսը, առանց կորցնելու հնարավորություն փոխելու իրենց դիրքորոշումը էջում:

Հետ աշխատելու պաշտոնի տարբեր բրաուզերների

Ոչ բոլոր Բրաուզերներ են հավասարապես համատեղելի. Մինչ Ամենա այլընտրանքային ծրագրեր Ինտերնետ ճամփորդել առանց որեւէ hitches ընկալվել արժեքը պաշտոնի բացարձակապես ճիշտ է », - քրոնիկ հատուկ» Internet Explorer համարում է գույքը, կախված իր տարբերակը:

Օրինակ, օգտագործելով արդեն «թաղված» զննարկիչը IE6, դուք չեք կարող օգտագործել արժեքը Ֆիքսված եւ ժառանգել «էշ», նրանք պարզապես անտեսել այն. Սակայն, չնայած այն հանգամանքին, որ յոթերորդ տարբերակը իրավիճակի սկսեց բարելավել, եւ ամրագրված արդեն մշակվում է, կժառանգեն սիրելի «բրաուզերի բեռնելու համար այլ դիտարկիչների,« հասել է միայն իր ութերորդ մարմնավորման:

Մնացած դիտորդների շատ հանգիստ կարգավորել պաշտոն առաջին տարբերակը, բացառությամբ օպերայի, որը ստացել աջակցությունը հատկությունների իր 4 տատանումները, հրատարակվել է 90-ականների կեսերին:

Հետ աշխատելու պաշտոնի Javascript

Ըստ էության, այդ պատմությունը, թե ինչպես պետք է աշխատել, որ պաշտոնում գույքի Javascript է, մենք `միայն հանուն պարկեշտության: Քանի որ այս գույքը չունի որեւէ հատուկ նիշ է կոչում, դուք կարող եք օգտագործել JS առանց որեւէ փոփոխությունների, օրինակ, սահմանել div Position ազգականի, պետք է ներառի մի գիծ նման: div.style.position = 'հարաբերական'.

Ինչպես դուք կարող եք տեսնել, դա բավականին պարզ է:

Ինչու Պաշտոն Հարաբերական առանձնակի ուշադրության է արժանի?

Իսկ մեծ մասը գույքային արժեքների Պաշտոնը, մեղմ ասած, «բանավիճել են» վերաբերյալ շրջակա տարրերի, օգտագործելով արժեքը "ոճի դիրքորոշումը հարաբերական", պետք է միշտ հիշեք, որ ամբողջ էջի, որպես ամբողջություն, քանի որ ոչ պատշաճ օգտագործումը կարող խստորեն «խոտոր» ամբողջ բովանդակությունը էկրանի ,

Ի լրումն, այս գույքը միայն թույլ է տալիս Ձեզ հեշտությամբ փոխարկել ֆիքսված դիզայն հարմարվողական, քանի որ դրա կիրառումը կարող է ավտոմատ կերպով ազդել է բոլոր բովանդակության էջերը: Ապա մենք դեռ ունենք ժամանակ քննարկելու օրինակներ եւ սխալներ, օգտագործելով այս արժեքը, եւ դուք կտեսնեք, դրա շոշափելի նշանակություն է գործնականում:

Երբ պետք է օգտագործել հարաբերական դիրքավորումը.

Ի լրումն պայմանական դասավորության էջերի HTML, Պաշտոն Հարաբերական հաճախ օգտագործվում է ստեղծել մի շարք հետաքրքիր հետեւանքների: Օրինակ, եթե դուք ուզում եք, որ նյութը «եկավ» էջում կամ, ընդհակառակը, աստիճանաբար դուրս է իր տարածքում, ապա դա հենց այդ գույքը կարող է օգնել ձեզ իրականացնել այս "trick»:

Այս «հնարքներ» են իրականացվող Javascript է, կամ, եթե դուք նպատակ է առաջադեմ տուգանքի միջոցով հատկությունների CSS3, որը թույլ է տալիս Ձեզ հարմարեցնել cyclical փոփոխություն արժեքի որոշակի փոփոխականի:

Բացի այդ, որոշ դեպքերում հնարավոր է ստեղծել «հիբրիդային» արժեքները դիրքորոշումը հարաբերական: CSS, թեեւ ոչ միեւնույն ժամանակ թույլ է տալիս Ձեզ սահմանել նման բան, դիրքի: բացարձակ ազգական, բայց օգտագործելով որոշ հնարքներ, դա դեռ հնարավոր է հասնել այս ազդեցություն: Այս մոտեցումը կարող է օգտակար լինել այն դեպքերում, որտեղ դուք պետք է ստեղծել մի բան բարդույթը նման մի Գործիքների հուշումը կամ pop-up ցանկի. Հաշվի առնելով, օրինակներ, մենք կտա նկարագրությունը կառուցվածքի այնպիսի «հիբրիդ»:

Օրինակներ օգտագործելով հարաբերական վարկանիշը

Դիրքորոշումը Հարաբերական - դա բավականին պարզ է, բայց ճկուն գործիք է, որ թույլ է տալիս Ձեզ իրականացնել մի շարք հետաքրքիր հետեւանքների: Որպեսզի չի վատնել ժամանակ եւ տեղ է գրել անիմաստ կոդ ձեւանմուշ, մենք ներկայացնում ենք մի քանի բանավոր ալգորիթմներ, որոնք կարող են զարդարել ձեր կայքը կամ հատուկ էջեր.

Սկսենք «մնալու» տողով: Ենթադրենք, դուք ունեք մի կարիք համար տարրի, որը «ճամփորդական», քանի որ ձախ եզրին էկրանի եւ կամաց - կամաց տեղափոխել այն աջ կողմում: Է իրականացնել նման «մեխանիզմը» պետք է սահմանել պաշտոնը: հարաբերական; ձախ: -100px, որտեղ -100 - մոտավոր թիվը փիքսել կազմող թաղամաս լայնությունը: Այս ոճը թույլ կտա Ձեզ թաքցնել միավորը դուրս է էկրանին, տեղադրելով այն «մեկնարկային դիրքի»: Այժմ դուք կարող եք օգտագործել մի սցենար, որը կբարձրացնի ամեն մի քանի միլիվայրկյան թողել գույքի արժեքը մեկ միավորի, քանի դեռ այն չի դառնա հավասար է լայնությամբ բրաուզերի պատուհանի մինուս լայնությամբ տարր. Արդյունքն ակնառու է, միավոր է, որը դուրս է գալիս ձախ եզրին, ուղղում ամբողջ էկրանին, եւ «parked" - ի իր աջ ձեռքը:

Մեկ այլ օրինակ է Ձեզ թույլ է տալիս ստեղծել «հարաբերական-աբսոլուտ» տարրեր: Օրինակ, դուք կարող եք մուտքագրել բացարձակ ներսում մյուսը, ունենալով դիրքորոշումը հարաբերական: Որպես հետեւանք, մենք ունենք «հարաբերական» բլոկի, որ չունի չափը, որի բացարձակ մակագրված է, այժմ կարող է դրսեւորել իրեն մի պաշտոնի անկախ նախորդ տարր.

Բնորոշ սխալները, երբ պաշտոնեական դիրքն օգտագործելով հարաբերական

Առավել տարածված սխալ է, երբ, օգտագործելով դիրքորոշումը հարաբերական է, որ շատ վեբ դիզայներների մոռանում ունակության մասին է արգելոցի տեղ միավորի, որը կարելի է գտնվում ամենուր: Օրինակ, եթե դուք ունեք մի բավականին մեծ է, տեղադրված դուրս էկրանին, եւ ունենալով հարաբերական դիրքը, իր տեղում կլինի մինետ «փոս»: Սակայն, նույնիսկ այս գույքը երբեմն ստեղծում է որոշակի անհարմարություններ կարող է օգտագործվել լավ է, օրինակ, ստեղծելով հետաքրքիր ազդեցություն »ինքնահամակարգմանը» կայքում, որտեղ իր բոլոր բլոկների աստիճանաբար տեղադրված են լավագույն պաշտոնը 0; ձախ: 0; տ ե. իր սկզբնական դիրքը.