Z-Index- ը CSS- ում

Դիրքորոշման տարրեր, որոնք պարունակում են Cascading Style Sheets

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

Եթե ​​դուք օգտագործում եք գրաֆիկա գործիքներ Word- ում եւ PowerPoint- ում կամ Adobe Photoshop- ի ավելի ուժեղ պատկերի խմբագրիչում, ապա հնարավորություններ եք տեսնում z-index- ի գործողության մեջ: Այս ծրագրերում դուք կարող եք ընդգծել ձեր նկարած օբյեկտը (ներ) ը եւ ընտրեք ձեր փաստաթղթի որոշ տարրեր «Ուղարկել դեպի ետ» կամ «Առջեւը բերել» տարբերակը: Photoshop- ում դուք չունեք այս գործառույթները, բայց դուք ունեք «շերտի» ծրագիծը եւ դուք կարող եք կազմակերպել, որտեղ կտորները վերածվում են կտավում `վերակազմավորելով այս շերտերը: Այս երկու օրինակներում, ըստ էության, այս օբյեկտների z-ինդեքսն եք:

Ինչ է z-index- ը:

Երբ դուք օգտագործում եք CSS դիրքորոշումը էջում տարրեր տեղադրելու համար, դուք պետք է մտածեք երեք հարթություններում: Կան երկու ստանդարտ չափսեր `ձախ / աջ եւ վերեւ / ներքեւ: Ձախից դեպի աջ ինդեքսը հայտնի է որպես x- ինդեքս, իսկ վերեւից ներքեւինը `y- ինդեքսը: Այսպիսով, դուք կստանաք հորիզոնական կամ ուղղահայաց տարրեր, օգտագործելով այս երկու ցուցանիշները:

Երբ հասնում է վեբ դիզայնի, կա նաեւ էջի կայուն կարգը: Էջի յուրաքանչյուր տարրը կարող է դասավորված լինել ցանկացած այլ տարրի վերեւից կամ ներքեւից: Z-index հատկությունը որոշում է, թե որտեղ է յուրաքանչյուր տարրը: Եթե ​​x- ինդեքսը եւ y- ինդեքսը հորիզոնական եւ ուղղահայաց գծեր են, ապա z-index- ը էջի խորությունն է, ըստ էության, 3-րդ հարթությունը:

Ինձ դուր է գալիս մտածել, որ ոստայնի տարրերը թղթի կտոր են, իսկ վեբ էջը , որպես կոլաժ: Որտեղ ես տեղադրում եմ թուղթը, որոշվում է դիրքավորումը, եւ որքանով այն ծածկված է մյուս տարրերով, z- ինդեքսը:

Z- ինդեքսը մի թիվ է, կամ դրական (օրինակ `100) կամ բացասական (օրինակ` 100): Նախնական z-index- ը 0 է: Ամենաբարձր z-ինդեքսով տարրը վերեւում է, այնուհետեւ `հաջորդ ամենաբարձր եւ այսպես` ամենացածր z-ինդեքսին: Եթե ​​երկու տարրը ունեն նույն z-ինդեքսի արժեքը (կամ այն ​​սահմանված չէ, նշանակում է օգտագործել 0-ի լռելյայն արժեքը), զննարկիչը դրանք շերտավորելու է HTML- ում հայտնվող կարգում:

Ինչպես օգտվել z-index- ը

Տվեք յուրաքանչյուր տարր, որը ցանկանում եք ձեր բեմում տարբեր z-ինդեքսի արժեք: Օրինակ, եթե ես ունեմ հինգ տարբեր տարրեր,

• element 1 - z-index -25
• element 2 - 82-ի z-ինդեքսը
• element 3 - z- ինդեքսը չի սահմանվել
• element 4 - z- ինդեքս 10
• element 5 - z-ինդեքս -3

Նրանք կպահեն հետեւյալ կարգով.

1. տարրը 2
2. տարր 4
3. տարրը 3
4. տարր 5
5. տարր 1

Ես խորհուրդ եմ տալիս օգտագործել ձեր z-index- ի արժեքները: Այսպիսով, եթե ավելի շատ տարրեր ավելացնեք էջում, ապա դուք ունեք այնտեղ տեղակայելու համար, առանց մյուս բոլոր տարրերի z-index- ի արժեքները հարմարեցնելու համար: Օրինակ:

• 100 իմ առավելագույն տարրերի համար
• 0 իմ միջին տարրերի համար
• -100 իմ ստորին տարրի համար

Դուք կարող եք նաեւ տալ երկու տարրեր նույն z-ինդեքսի արժեքը: Եթե ​​այս տարրերը տեղադրվեն, դրանք կցուցադրվեն HTML- ում գրված կարգում, իսկ վերջին տարրը վերեւում:

Մեկ նշում, տարրը արդյունավետորեն օգտագործելու z-index հատկությունը, այն պետք է լինի բլոկի մակարդակի տարր կամ օգտագործեք ձեր CSS ֆայլում «բլոկ» կամ «inline-block» ցուցադրումը:

Իրական հոդվածը Ջենիֆեր Քրինինն է: Վերափոխվել է 12/09/16 թ., Ժերեմի Գիրարդի կողմից: