position
Misol
<h2> elementini joylashtiring:
h2 {
position: absolute;
left: 100px;
top: 150px;
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Ta’rif va qo‘llanilishi
position xususiyati element uchun ishlatiladigan joylashtirish usuli turini belgilaydi (static, relative, absolute, fixed yoki sticky).
| Standart qiymat: | static |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS2 |
| JavaScript sintaksisi: | object.style.position="absolute" Sinab ko‘ring |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| position | 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
Eslatma: sticky qiymati Edge 15 va undan oldingi versiyalarda qo‘llab-quvvatlanmaydi.
CSS sintaksisi
position: static|absolute|fixed|relative|sticky|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| static | Standart qiymat. Elementlar hujjat oqimida qanday kelsa, shu tartibda render qilinadi | Sinab ko‘ring » |
| absolute | Element o‘zining birinchi joylashtirilgan (static bo‘lmagan) ajdod elementiga nisbatan joylashtiriladi | Sinab ko‘ring » |
| fixed | Element brauzer oynasiga nisbatan joylashtiriladi | Sinab ko‘ring » |
| relative | Element o‘zining odatiy joylashuviga nisbatan joylashtiriladi, shuning uchun "left:20px" elementning CHAP joylashuviga 20 piksel qo‘shadi | Sinab ko‘ring » |
| sticky | Element foydalanuvchining aylantirish (scroll) pozitsiyasiga qarab joylashtiriladi Sticky element aylantirish pozitsiyasiga qarab |
Sinab ko‘ring » |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Ko‘proq misollar
Misol
Elementni odatiy joylashuviga nisbatan qanday joylashtirish mumkin:
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
O‘zingiz sinab ko‘ring »
Misol
Joylashtirishning boshqa usullari:
#parent1 {
position: static;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child1 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
#parent2 {
position: relative;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child2 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS darsligi: CSS joylashtirish
HTML DOM ma’lumotnomasi: position xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!