CSS-POSITION
position
position – սահմանում է էլեմենտների դիրքավորման մեթոդը, որը հարաբերական է բրաուզերի պատուհանի հետ, կամ վեբ էջի այլ էլեմենտների հետ։
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | static |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների հետ |
Ենթարկվում է անիմացիայի | Ոչ |
Արժեքներն են՝
absolute – էլեմենտը դիրքավորում է վեբ էջից դուրս, կարծես այն չի էլ նշվել կոդում։ Վեբ էջի մնացած էլեմենտները չեն նկատում դրա գոյությունը։ Տվյալ էլեմենտի վայրը սահմանվում է left, top, right և bottom հատկությունների միջոցով։
Էլեմենտի վայրը կարող է որոշվել երկու կերպ՝
1. Եթե էլեմենտի ծնողը սահմանված է որպես « position: static », կամ եթե էլեմենտը չունի որևէ ծնող, ապա դրա վայրը՝ տեղակայման կորդինատները, կվորոշվի բրաուզերի պատուհանի վերևի ձախ եզրից։
Օրինակը սկզբնական տեսքով՝
absolute-ի առաջին տարբերակը՝
.parent {
position: static;
margin-left: 25%;
background: grey;
width: 700px;
height: 500px;
border: 3px solid black;
}
.layer1 {
background: #C70039;
position: relative;
left: 100px;
width: 480px;
font-size: 30px;
}
.layer2 {
background: orange;
position: absolute;
top: 0;
left: 0;
font-size: 30px;
}
.layer3 {
background: #900C3F;
position: relative;
left: 100px;
width: 480px;
font-size: 30px;
}
.layer4 {
background: #581845;
position: relative;
left: 100px;
width: 480px;
font-size: 30px;
}
hayti
Lorem ipsum dolor sit amet. Various...
Lorem ipsum dolor sit amet. Various...
Lorem ipsum dolor sit amet. Various...
Lorem ipsum dolor sit amet. Various...
Երկրորդ էլէմենտը դուրս է եկել իր սկզբնական վայրից և տեղավորվել բրաուզերի պատուհանի վերևի ձախ եզրում։ Իր սկզբնական վայրը չի պահպանվել, այլ լրացվել է մեկ այլով, քանի որ էլէմենտը դուրս է եկել տվյալ վեբ էջից, այնպես, կարծես այն չի էլ եղել։ Էլէմենտը անկախ է դարձել մնացածի հանդեպ։
2. Եթե էլեմենտի ծնողը սահմանված է որպես « position: relative, ապա դրա վայրը՝ տեղակայման կորդինատները, կվորոշվի ծնող էլեմենտի վերևի ձախ եզրից։
Երկրորդ տարբերակը՝
.parent {
position: relative;
margin-left: 25%;
background: grey;
width: 700px;
height: 500px;
border: 3px solid black;
}
.layer2 {
background: orange;
position: absolute;
top: 0;
left: 0;
font-size: 30px;
}
.
.
.
Երկրորդ էլէմենտը դուրս է եկել իր սկզբնական վայրից և տեղավորվել ծնողի վերևի ձախ եզրում։
fixed –իր գործողությամբ նման է absolute-ին, բայց կպչում է բրաուզերի պատուհանի այն վայրին, որը որոշվել է left, top, right և bottom հատկությունների միջոցով։ Երբ վեբ էջը տեղաշարժվում է, էլեմենտը մնացած էլէմենտների հետ չի տեղաշարժվում։
.parent {
position: relative;
margin-left: 25%;
background: grey;
width: 700px;
height: 500px;
border: 3px solid black;
}
.layer2 {
background: orange;
position: fixed;
top: 0;
left: 0;
font-size: 30px;
}
.
.
.
relative – էլեմենտի դիրքը սահմանվում է իր սկզբնական վայրից և փոխվում է left, top, right, bottom հատկությունների միջոցով։ Էլեմենտը մնում է վեբ էջի հոսքի մեջ՝ չի անկախանում մնացած էլեմենտներից և տեղափոխվելու դեպքում վայրը չի լրացվում մեկ այլ էլեմենտով։
.parent {
position: relative;
margin-left: 25%;
background: grey;
width: 700px;
height: 500px;
border: 3px solid black;
}
.layer2 {
background: orange;
position: relative;
width: 480px;
top: -43px;
left: -50px;
font-size: 30px;
}
.
.
.
static – էլեմենտները ցուցադրվում են սովորականի պես և left, top, right, bottom հատկությունների օգտագործումը չի ունենա ոչ մի արդյունք։
sticky – այս հատկությունը relative-ի և fixed-ի համադրությունն է։ Էլեմենտը relative է այնքան ժամանակ քանի դեռ վեբ էջը իջեցնելով չի հատվել էլեմենտի սկզբնական դիրքը, իսկ դրանից հետո էլեմենտը համարվում է ֆիքսված՝ fixed:
.parent {
position: relative;
margin-left: 25%;
background: grey;
width: 700px;
height: 500px;
border: 3px solid black;
}
.layer2 {
background: orange;
position: sticky;
width: 480px;
top: 0;
left: 0;
font-size: 30px;
}
.
.
.
top right bottom left
գործում են position հատկության հետ և սահմանում են էլեմենտների վայրը վեբ էջում։
Օրինակ top-ը տարածություն է սահմանում ծնողի վերևի եզրից(այն կարող է լինել նաև բրաուզերի պատուհանը) մինչև դուստրի վերևի եզրը և հաշվի չի առնվում օգտագործված արտաքին կամ ներքին սահմանները(սրանք առանձին են և չեն ներառվում top-ին սահմանած չափին)։
Մնացածն գործում են նույն տրամաբանությամբ։
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | auto |
Ժառանգվում են | Ոչ |
Կիրառվում են | Բոլոր էլեմենտների հետ |
Ենթարկվում է անիմացիայի | Այո |
div {
background: orange;
position: absolute;
top: 150px;
margin-top: 50px;
width: 200px;
height: 200px;
}
Էլեմենտի դիրքավորման հաշվարկը կախված է position հատկությունից։
Եթե վերջինս absolute է, որպես ծնող կհանդիսանա բրաուզերի պատուհանը և էլեմենտի դիրքը կվորոշվի բրաուզերի պատուհանի համապատասխան եզրերից։
Եթե position-ը հավասար է relative-ի, էլեմենտի վայրը կսահմանվի՝ սկսած իր սկզբնական դիրքից։
Եթե ծնողի position-ը հավասար է relative-ի, իսկ դուստրինը՝ absolute-ի(կամ relative-ի), էլեմենտի վայրը կսահմանվի ծնողի համապատասխան եզրերից։
left
right
top
bottom
Արժեքներն են՝
auto – էլեմենտի դիրքը չի փոխվում։
%-ի պարագայում՝
1. top և bottom-ի դեպքում տոկոսը կհաշվարկվի ըստ ծնողի բարձրության չափի։
2. left և right-ի դեպքում տոկոսը կհաշվարկվի ըստ ծնողի լայնության չափի։
z-index
z-index – վեբ էջի բոլոր էլեմենտները կարող են տեղադրվել իրար վրա։
Եթե անհրաժեշտ է դրանք տեղադրել սահմանված հերթականությամբ, ապա կօգտագործվի 3-րդ հարթությունը՝ Z-ը(x-հորիզոնական, y-ուղղահայաց, z-էկրանին ուղղահայաց, այսինքն մոտ կամ հեռու)։
Գործում է այն էլեմենտների համար, որոնց position -ը հավասար է՝ absolute, fixed կամ relative:
Հակիրճ տվյալներ՝
Նախասահմանված արժեքը | auto |
Ժառանգվում են | Ոչ |
Կիրառվում են | Էլեմենտներ, որոնք ունեն position պարամետրը։ |
Ենթարկվում է անիմացիայի | Այո |
Արժեքներն են՝
Որպես արժեք նշվում է ամբողջական թիվ(դրական, բացասական, զրո)։
Որքան մեծ է թիվը, այնքան ավելի բարձր կլինի էլեմենտը այլ էլեմենտներից։
Եթե z-index-ը բոլոր էլեմենտներում ունի նույն թիվը՝ նույն քաշը, ապա առաջնահերթությունը կտրվի html կոդի ամենավերջում նշված էլեմենտին և այն կցուցադրվի առաջին պլանում։
auto – էլեմենտների հերթականությունը կատարվում է ավտոմատ՝ հաշվի առնելով դրանց դիրքը html կոդում, կամ ո՞ր ծնողին են պատկանում, քանի որ դուստրերն ունեն նույն թիվը ինչ իրենց ծնողը։
.parent {
width: 600px;
height: 300px;
background: grey;
border: 3px solid black;
position: relative;
}
.div01 {
width: 200px;
height: 200px;
background: #FFC300;
position: absolute;
top: 80px;
left: 80px;
z-index: 5;
}
.div02 {
width: 200px;
height: 200px;
background: #FF5733;
position: absolute;
top: 60px;
left: 60px;
z-index: 4;
}
.div03 {
width: 200px;
height: 200px;
background: #C70039;
position: absolute;
z-index: 3;
top: 40px;
left: 40px;
}
.div04 {
width: 200px;
height: 200px;
background: #900C3F;
position: absolute;
top: 20px;
left: 20px;
z-index: 2;
}
.div05 {
width: 200px;
height: 200px;
background: #581845;
position: absolute;
z-index: 1;
}
hayti