Position Xususiyati

CSS Tashkiliy - Position Xususiyati

Position Xususiyati

Position xususiyati element uchun ishlatiladigan joylashuv usulini (statik, nisbiy, doimiy, mutlaq yoki yopishqoq) belgilaydi.

Position xususiyati element uchun joylashuv usulini belgilaydi.

Besh xil joylashuv qiymati mavjud:

• statik
• nisbiy
• doimiy
• mutlaq
• yopishqoq

Elementlar keyin top, bottom, left, va right xususiyatlari yordamida joylashadi. Biroq, bu xususiyatlar avval position xususiyati o'rnatilmasa ishlamaydi. Ular joylashuv qiymatiga qarab turlicha ishlaydi.

position: static;

HTML elementlari standart bo'yicha statik joylashadi.

Statik joylashgan elementlar top, bottom, left, va right xususiyatlaridan ta'sirlanmaydi.

position: static; bo'lgan element hech qanday maxsus tarzda joylashmaydi; u har doim sahifaning normal oqimiga ko'ra joylashadi:

Bu <div> elementi position: static; ga ega; Quyida foydalaniladigan CSS keltirilgan:

Misol

div.static {
  position: static;
  border: 3px solid #73ad21;
}

position: relative;

position: relative; bo'lgan element o'zining normal pozitsiyasiga nisbatan joylashadi.

Nisbiy joylashgan elementning top, right, bottom, va left xususiyatlarini o'rnatish uni normal pozitsiyasidan olib chiqadi. Boshqa kontent bo'sh qoldirilgan joyga mos kelmaydi.

Bu <div> elementi position: relative; ga ega; Quyida foydalaniladigan CSS keltirilgan:

Misol

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73ad21;
}

position: fixed;

position: fixed; bo'lgan element ko'rinishga nisbatan joylashadi, bu degani sahifa aylantirilsa ham doimiy ravishda bir joyda qoladi. Elementni joylashtirish uchun top, right, bottom, va left xususiyatlari ishlatiladi.

Doimiy element sahifada u joylashgan joyda bo'sh joy qoldirmaydi.

Sahifaning pastki o'ng burchagidagi doimiy elementni ko'ring. Quyida foydalaniladigan CSS keltirilgan:

Misol

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73ad21;
}

Bu <div> elementi position: fixed; ga ega;

position: absolute;

position: absolute; bo'lgan element eng yaqin joylashgan ajdodga nisbatan joylashadi (doimiy joylashuvga nisbatan emas, doimiy joylashuvga o'xshab).

Biroq; agar mutlaq joylashgan element joylashgan ajdodga ega bo'lmasa, u hujjat tanasidan foydalanadi va sahifa aylantirilganda harakat qiladi.

Eslatma: Mutlaq joylashgan elementlar normal oqimdan chiqariladi va boshqa elementlar bilan ustma-ust kelishi mumkin.

Quyida oddiy misol keltirilgan:

Bu <div> elementi position: relative; ga ega; Bu <div> elementi position: absolute; ga ega; Quyida foydalaniladigan CSS keltirilgan:

Misol

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;
}

position: sticky;

position: sticky; bo'lgan element foydalanuvchining aylantirish pozitsiyasiga asoslangan joylashadi.

Yopishqoq element nisbiy va doimiy o'rtasida o'zgaradi, aylantirish pozitsiyasiga qarab. U berilgan offset pozitsiyasida ko'rinishda joylashadi - keyin u o'z joyida "yopishadi" (doimiy pozitsiya kabi).

Eslatma: Yopishqoq joylashuv ishlashi uchun top, right, bottom yoki left dan kamida bittasini belgilashingiz kerak.

Quyidagi misolda, yopishqoq element sahifaning yuqori qismiga (top: 0) yopishadi, siz uning aylantirish pozitsiyasiga yetganda.

Misol

div.sticky {
  position: sticky;
  top: 0;
  background-color: green;
  border: 2px solid #4caf50;
}

Rasm ustida matn joylash

Rasm ustiga matnni joylashtirish usuli:

Misol

Cinque Terre
Pastki Chap | Yuqori Chap | Yuqori O'ng | Pastki O'ng | Markazlashtirilgan

O'zingiz sinab ko'ring:

Boshqa Misollar

Element shaklini o'rnatish Quyidagi misol elementning shaklini qanday o'rnatishni ko'rsatadi. Element ushbu shaklga kesiladi va ko'rsatiladi.

O'zingizni sinab ko'ring

Mashq:

<h1> elementini doimo yuqoridan 50px va o'ngdan 10px joylashtiring, oynaning yoki ramkaning chetlariga nisbatan.

<style>
h1 {
 
:
;
 
: 50px;
 
: 10px;
}
</style>
 
<body>
  <h1>Bu bir sarlavha</h1>
  <p>Bu bir paragraf</p>
  <p>Bu bir paragraf</p>
</body>

Mashqni boshlash

Barcha CSS Joylashuv Xususiyatlari