position

Ավելի բարդ էջատումներ կառուցելու նպատակով արի քննարկենք position հատկությունը։ Այն ունի մի փունջ արժեքներ որոնց անունները դժվար է հիշել։ Արի անցնենք դրանցով մեկ առ մեկ։ Կարող էս նաև էջանշել այս էջը։

static

.static {
  position: static;
}

relative

.relative1 {
  position: relative;
}
.relative2 {
  position: relative;
  top: -20px;
  left: 20px;
  background-color: white;
  width: 500px;
}

fixed

Ֆիքսված դիրքավորմամբ էլեմենտը հարաբերական է էջի դիտարկվող մասի նկատմամբ։ Սա նշանակում է որ ֆիքսված էլեմենտը կմնա միևնույն դիրքում նույնիսկ եթե scroll անենք էջը։ Ֆիքսված դիրքավորումը կիրառվում է relative, top, right, bottom, և left հատկությունների հետ համատեղ։

Համոզված եմ, որ արդեն նկատել ես այս էջի ներքևի աջ անկյունում գտնվող ֆիքսված էլեմենտը։ Արդեն կարելի է նայել այնտեղ։ Ահա այն CSS-ը, որի պատճառով էլեմենտը այդ դիրքում է գտնվում։

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 200px;
  background-color: white;
}

Մոբայլ դիտարկիչները զարմանալիորեն անկայուն աջակցություն են ցուցաբերում ֆիքսված դիրքավորման նկատմամբ։ Իրավիճակի մասին ավելին իմացիր այստեղ.

absolute

absolute-ը դիրքավորման ամենախրթին արժեքն է. absolute-ը իրեն դրսևորում է fixed-ի պես։ Տարբերությունը այն է, absolute-ը հարաբերական է մոտակա դիրքավորված ծնողին, իսկ fixed-ը՝ էջի դիտարկվող մասին։

Եթե բացարձակ դիրքավորմամբ էլեմենտը չունի դիրքավորված ծնող, այն օգտագործում է փաստաթղթի body-ին որպես ծնող։ Հիշենք, որ "դիրքավորված" էլեմենտներ են բոլոր այն էլեմենտները, որոնք ունեն դիրքավորման ցանկացած արժեք բացի static-ից։

Ահա պարզ օրինակ

.relative {
  position: relative;
  width: 600px;
  height: 400px;
}
.absolute {
  position: absolute;
  top: 120px;
  right: 0;
  width: 300px;
  height: 200px;
}

Այս նյութը խրթին էր, սակայն հիմնարար է լավ CSS էջատումներ ստեղծելու համար։ Հաջորդ էջում մենք կօգտագործենք position-ը ավելի կիրառական օրինակի մեջ։