CSS da joylashtirish tartibi – Position xususiyati

CSSda – Position xususiyati


CSSda joylashtirish tartibi – Position xususiyati


Position(joylashtirish) xususiyati

Position xususiyati element qayerga joylashtirilish kerakligini aniqlash uchun ishlatiladi.

Position xususiyatining to'rt xil qiymati mavjud:

  • Static (turg'un)
  • Relative (nisbiy)
  • Absolute (muayyan)
  • Fixed (o'zgarmas)

Elementlarni top(yuqori), bottom(past), left(chap) va right(o'ng) atributlarini qo'llagan holda ham joylashtirish mumkin. Lekin, position xususiyati ishlatilmas ekan bu atributlar ham ishga tushmaydi. Position xususiyatining qiymatiga qarab ularning vaziafalari ham o'zgarib boradi.


position: static;

Bunda HTML elementlari o'z holicha turg'un joylashadi.

Top, bottom, left va right qiymatlari berilganda static joylashtirilgan elemtlarga hech qanday ta'sir ko'rsatmaydi.

Elementlar position:static xususiyati bilan joylashtirilganda ular hech qanday alohida bir usul bilan emas, shunchaki sahifaning odatiy joylashuviga ko'ra joylashtirib qo'yiladi.


Quyida keltirilgan na'munada <div> elementining position xususiyatiga static qiymati berilgan.

Namuna:

O'zingni Sinab Ko'r
div.static {
    position: static;
    border: 3px solid #73AD21;
}

position: relative;

position: relative xususiyati ishlatilganda elementlar o'zining normal joylashuviga nisbatan joylashtiriladi.

Position xususiyatiga top, bottom, left va right qiymatlari berilganda elementlar o'zlari turgan joylariga nisbatan yuqoriga, pastga, o'ngga yoki chapga joylashtiriladi. Elementdan qolgan bo'sh joyga boshqa elementlar o'rnasha olmaydi.


Quyida keltirilgan na'munada <div> elementining position xususiyatiga relative qiymati berilgan.

Namuna:

O'zingni Sinab Ko'r
div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}


position: fixed;

position: fixed xususiyati ishlatilganda elementlar viewprot(sahifaning oynada ko'rinib turgan qismi)ga nisbatan joylashtiriladi, ya'ni ular sahifa yuqoriga, pastga ko'tarib-tushurilganda ham bitta joyda o'zgarmasdan turaveradi.

Joylashgan o'rni o'zgarmas bo'lgan element o'zidan oraliq(bo'sh joy) qoldirmaydi.


Namuna:

O'zingni Sinab Ko'r
div.fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

position: absolute;

position: absolute xususiyati ishlatilganda element unga eng yaqin turgan muayyan joylashgan elmentga nisbatan joylashtiriladi.

Agarda absolute qiymati birinchi marta qo'llanilayotgan bo'lsa, element document tana qismiga ko'ra joylashadi va page scrolling(sahifani tepaga, pastga chiqarib tushurish) bilan birgalikda harakatlanadi.


Namuna:

O'zingni Sinab Ko'r
div.relative {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid #73AD21;
} 

div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 100px;
    border: 3px solid #73AD21;
}

Bir-biriga ustma-ust tushib qolgan elementlar

Elementlar joylashtirilayotganda ular bir-birining ustiga tushib qolishi, bir-birini qisman qoplab qolishi mumkin.

z-index xususiyati elementlarni taxlam ko'rinishida ifodalaydi(elementlardan qaysinisi old qismda, qaysinisi orqa fonda yoki boshqacha ko'rinishlarda turish kerakligi)

Elementlar to'g'ri va teskari tartibda joylashishi mumkin.

Namuna:

O'zingni Sinab Ko'r
img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

...   Eslatma: Agar ikki element z-index xususiyatisiz taxlam ko'rinishida joylashtiriladigan bo'lsa, HTML kodlarida keltirilgan eng oxirgi element sahifaning eng yuqori qismida aks etadi.


CSSning joylshuv atributlari

Atributlar Tavsifi
Bottom Blokning quyi chegarasiga joylashtiradi
Clip Muayyan joylashtirilgan elementni mustahkam o'rnashtiradi
Cursor Kursorning qaysi turi ifodalanishi kerakligini bildliradi
Left Blokning yuqori chegarasiga joylashtiradi
Overflow Element blokdan tashqariga chiqib ketadigan bo'lsa nima qilish kerakligini aniqlaydi
Overflow-x Element blokning o'ng/chap chegaralaridan tashqariga chiqib ketadigan bo'lsa nima qilish kerakligini aniqlaydi
Overflow-y Element blokning yuqori/quyi chegaralaridan tashqariga chiqib ketadigan bo'lsa nima qilish kerakligini aniqlaydi
Position Joylashuvning qaysi turi ishlatilishi kerakligini bildiradi
Right Blokning o'ng chegarasiga joylashtiradi
Top Blokning yuqori chegarasiga joylashtiradi
z-index Elementlarni ustma-ust joylashtiradi


Innovative Lab web sahifasiga xush kelibsiz biz bilan birga IT sohasidagi o'z bilimlaringizni bosqichma-bosqich oshirib boring!


Telegram kanalimizdan kunlik darslarni o'rganing  

TOSHKENT SHAHRIDAGI INHA UNIVERSITETI - 2017