CSS դիրքորոշումը ավելին է, քան X- ը, Y- համակարգում
CSS դիրքավորումը վաղուց արդեն եղել է կայքի մասշտաբների ստեղծման կարեւոր բաղադրիչ: Նույնիսկ նոր CSS դասավորության մեթոդների առաջացման դեպքում, ինչպիսիք են Flexbox- ը եւ CSS Grid- ը, դիրքորոշումը դեռեւս կարեւոր տեղ ունի ցանկացած վեբ դիզայների տոպրակի մեջ:
CSS- ի դիրքորոշումը օգտագործելով, առաջին բանը, որ դուք պետք է անեք, Ստեղծեք CSS- ի սեփականությունը, դիրքորոշման համար զննարկիչին, եթե օգտագործեք տվյալ տարրի համար բացարձակ կամ հարաբերական դիրքը: Դուք նաեւ պետք է հստակ հասկանաք այս երկու դիրքի հատկությունների տարբերությունը:
Թեեւ բացարձակ եւ հարաբերական են CSS- ի երկու դիրքորոշումը, որն առավել հաճախ օգտագործվում է վեբ-դիզայնի մեջ, իրականում գործում են չորս պետություններ,
- ստատիկ
- բացարձակ
- հարաբերական
- ամրագրված
Static- ը վեբ էջի ցանկացած տարրի համար լռելյայն դիրքորոշում է: Եթե դուք չեք սահմանում տարրերի դիրքորոշումը, դա կլինի ստատիկ: Սա նշանակում է, որ այն էկրան կցուցադրվի այն հիման վրա, որտեղ այն գտնվում է HTML- ի փաստաթղթում եւ ինչպես է դրսեւորվում այդ փաստաթղթի նորմալ հոսքը :
Եթե կիրառեք դիրքորոշման կանոններ վերեւում կամ ձախ կողմում, այնպիսի տարրին, որը ստատիկ դիրքեր ունի, այդ կանոնները անտեսվեն եւ տարրը կմնա, որտեղ այն հայտնվում է նորմալ փաստաթղթաշրջանառության մեջ: Ճիշտն ասած, հազվադեպ եք, եթե երբեւէ, պետք է տարրը կարգավորես CSS- ում ստատիկ դիրքերից, քանի որ դա լռելյայն արժեք է:
Բացարձակ CSS դիրքորոշում
Բացարձակ դիրքավորումը, ամենայն հավանականությամբ, հասկանալի CSS- ի դիրքն է: Դուք սկսում եք այս CSS դիրքը:
պաշտոնը `բացարձակ;Այս արժեքը պատմում է բրաուզերում, որ այն, ինչ պետք է տեղադրվի, պետք է հեռացվի փաստաթղթի նորմալ հոսքերից եւ փոխարենը էջում տեղադրվի ճշգրիտ վայրում: Սա հաշվարկվում է այդ տարրի ամենամոտ ոչ ստատիկ տեղակայված նախնիների հիման վրա:
Քանի որ բացարձակապես տեղադրված տարրը հանվում է փաստաթղթի նորմալ հոսքից, այն չի ազդի, թե ինչպես է HTML- ի տարրերը առաջ կամ դրանից հետո տեղադրվեն վեբ էջում:
Որպես օրինակ `եթե դուք ունեցել եք բաժանմունք, որը օգտագործվել է հարաբերականորեն օգտագործելով (մենք կքննարկենք այդ արժեքը կարճ ժամանակով), եւ այդ բաժանման մեջ դուք ունեք մի պարբերություն, որը ցանկանում եք դիրքորոշման վերին մասում 50 փիքսել կցանկանար ավելացնել «բացարձակ» դիրքի արժեքը այդ կետին, ինչպես նաեւ «վերեւի» գույքի վրա 50px- ի օֆսեթային արժեքի հետ:
պաշտոնը `բացարձակ; վերեւ: 50px;Այս բացարձակապես տեղադրված տարրը միշտ դրսեւորում է այդ համեմատաբար տեղակայված բաժնի վերեւից 50 փիքսել, անկախ նրանից, թե ինչ այլ բան այնտեղ է դրսեւորվում նորմալ հոսքի մեջ: Ձեր «բացարձակ» դիրքավորված տարրը օգտագործեց համեմատաբար տեղադրվածը, որպես դրա համատեքստը, եւ օգտագործելով դրական արժեքը հարաբերական է:
Օգտագործման համար մատչելի չորս դիրքի հատկությունները հետեւյալն են.
- գագաթ
- ճիշտ
- ներքեւի մասում
- ձախ
Դուք կարող եք օգտագործել կամ վերին կամ ներքեւից (քանի որ տարրը չի կարող տեղադրվել ըստ այդ երկու արժեքների) եւ աջ կամ ձախ:
Եթե տարրը բացվում է բացարձակ դիրքորոշման մեջ, բայց այնտեղ ոչ ստատիկորեն տեղադրված նախնիներ չկան, ապա այն կտեղադրվի հարաբերականորեն մարմնի տարրին, որը էջի ամենաբարձր մակարդակի տարրն է:
Հարաբերական դիրքը
Մենք արդեն նշել ենք հարաբերական դիրքորոշում, ուստի եկեք դիտենք այդ գույքը հիմա:
Հարաբերական դիրքորոշումը օգտագործում է նույն չորս դիրքի հատկությունները, որպես բացարձակ դիրքի, բայց փոխարենը, հիմք դնելով տարրի դիրքը իր ամենամոտ ոչ ստատիկ դիրքի վրա գտնվող նախնիների վրա, այն սկսվում է այնտեղից, որտեղ այն պետք է լինի, եթե այն դեռեւս նորմալ հոսքի մեջ է:
Օրինակ, եթե ձեր վեբ էջում ունեք երեք պարբերություն, իսկ երրորդը ունի «դիրքը, հարաբերական» ոճը, դրվում է այն դիրքորոշման վրա, որը հիմնված է ներկայիս գտնվելու վայրի վրա:
պարբերություն 3.
Վերոնշյալ օրինակում, երրորդ պարբերությունը տեղադրվելու է կոնտեյներային տարրի ձախ կողմում, սակայն դեռեւս առաջին երկու պարբերություններից ցածր կլինի: Այն մնացել է փաստաթղթի նորմալ հոսքի մեջ եւ պարզապես մի փոքր շեղվել: Եթե փոխեցիր այն պաշտոնին, բացարձակ; դրանից հետո ամեն ինչ դրսեւորվելու է, քանի որ այն այլեւս չէր լինի փաստաթղթի նորմալ հոսքի մեջ:
Վեբ էջի տարրերը հաճախ օգտագործվում են դիրքորոշման արժեքը սահմանելու համար, որը կապված է ոչ մի օպտիկական արժեքի հետ, ինչը նշանակում է, որ տարրը մնում է այնտեղ, որտեղ այն կհայտնվի նորմալ հոսքում: Դա արվում է բացառապես այն տարրը հաստատելու համար, որպես համատեքստ, որի դեմ այլ տարրեր կարող են լինել բացարձակ: Օրինակ, եթե ձեր ամբողջ կայքը շրջապատող բաժին ունեք «կոնտեյներների» դասի արժեքով (որը վեբ դիզայնի շատ տարածված սցենար է), ապա այդ բաժանումը կարող է կարգավորվել դիրքի, որպեսզի ներսում որեւէ բան կարող է օգտագործվել այն որպես դիրքորոշման համատեքստ:
Ինչ վերաբերում է հաստատուն դիրքորոշմանը:
Հաստատուն դիրքավորումը շատ նման է բացարձակ դիրքորոշմանը: Element- ի դիրքորոշումը հաշվարկվում է այնպես, ինչպես բացարձակ մոդելը, սակայն այնուհետեւ ամրագրված տարրերը ամրագրվում են այդ վայրում `գրեթե ջրի մակարդակի նշագիծ : Էջում մնացած ամեն ինչ այնուհետեւ ոլորել է այդ տարրը:
Այս գույքի արժեքն օգտագործելու համար դուք կստանաք:
պաշտոնը `ֆիքսված;Հիշեք, որ ձեր կայքում տեղադրեք տարրը, այն տպագրեք այն վայրում, երբ ձեր վեբ էջը տպագրվում է: Օրինակ, եթե ձեր տարրը ամրագրված է ձեր էջի վերեւում, այն կհայտնվի յուրաքանչյուր տպագիր էջի վերեւում, քանի որ ամրագրված է էջի վերեւում: Դուք կարող եք օգտագործել մեդիա տիպերը, փոխելու համար, թե ինչպես տպագիր էջերը ցուցադրում են ֆիքսված տարրեր.
@media էկրանը {h1 # առաջին {դիրքորոշումը `fixed; }} @ media print {h1 # առաջին {դիրքորոշումը `static; }}Իրական հոդվածը Ջենիֆեր Քրինինն է: Փոփոխված է Ջերեմի Գիրարդը 1/7/16 թ .: