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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="parent">
<div class="layer2">Lorem ipsum dolor sit amet. Various...</div>
<div class="layer3">Lorem ipsum dolor sit amet. Various...</div>
<div class="layer4">Lorem ipsum dolor sit amet. Various...</div>
<div class="layer5">Lorem ipsum dolor sit amet. Various...</div>
</div>
</body>
</html>
Երկրորդ էլէմենտը դուրս է եկել իր սկզբնական վայրից և տեղավորվել բրաուզերի պատուհանի վերևի ձախ եզրում։ Իր սկզբնական վայրը չի պահպանվել, այլ լրացվել է մեկ այլով, քանի որ էլէմենտը դուրս է եկել տվյալ վեբ էջից, այնպես, կարծես այն չի էլ եղել։ Էլէմենտը անկախ է դարձել մնացածի հանդեպ։
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hayti</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="parent">
<div class="div01"></div>
<div class="div02"></div>
<div class="div03"></div>
<div class="div04"></div>
<div class="div05"></div>
</div>
</body>
</html>
Armenian 
Russian