position xususiyati
position xususiyati elementlarni pozitsiyalash
usulini belgilaydi. Bu xususiyat ko'pincha
top,
right,
bottom,
left
xususiyatlari bilan birgalikda ishlatiladi,
ular mos ravishda yuqori, o'ng, pastki va chapdan
chekinishlarni o'rnatadi.
Sintaksis
selector {
position: absolute | relative | fixed | static | sticky;
}
position uchun qiymatlar
| Qiymat | Ta'rif |
|---|---|
absolute |
Absolyut pozitsiyalash. Element hujjatning oddiy oqimidan olib tashlanadi va eng yaqin pozitsiyalangan ajdodga nisbatan (agar mavjud bo'lsa) yoki brauzer oynasiga nisbatan joylashadi. |
relative |
Nisbiy pozitsiyalash. Element hujjat oqimidagi o'zining normal holatiga nisbatan siljiydi, lekin u egallagan joy saqlanib qoladi. |
fixed |
Fiksirlangan pozitsiyalash. Element hujjatning oddiy oqimidan olib tashlanadi va brauzer oynasiga nisbatan joylashadi. Sahifa aylantirilganda o'rnida qoladi. |
static |
Statik pozitsiyalash. Bu qiymat pozitsiyalash yo'qligini anglatadi va element odatdagidek harakat qiladi. |
sticky |
Yopishqoq pozitsiyalash.
Element aylantirish paytida belgilangan pozitsiyaga yetguncha
relative kabi harakat qiladi, shundan so'ng
ko'rsatilgan joyga yopishadi (fixed kabi).
|
Standart qiymat: static.
Misol . Absolyut pozitsiyalash
Elementni ekranning yuqori chap burchagida kichik chekinishlar bilan joylashtiramiz:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: absolute;
top: 40px;
left: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
Misol . Absolyut pozitsiyalash
Endi elementni ekranning yuqori o'ng burchagida kichik chekinishlar bilan joylashtiramiz:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: absolute;
top: 40px;
right: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
Misol . Fiksirlangan pozitsiyalash
Fiksirlangan pozitsiyalashda element aylantirilganda ham o'rnida qoladi:
<div class="elem"></div>
<div class="main">
some long text
</div>
.elem {
position: fixed;
top: 40px;
left: 50px;
width: 100px;
height: 100px;
background-color: #98fb98;
}
.main {
width: 400px;
text-align: justify;
margin: 20px auto;
}
:
Misol . Nisbiy pozitsiyalash
Nisbiy pozitsiyalashda element o'zining normal holatiga nisbatan siljiydi, lekin boshqa elementlar element siljimagan bo'lsagidek harakat qiladi:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
display: flex;
justify-content: flex-row;
}
.elem {
margin: 0 3px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
.elem2 {
position: relative;
top: 20px;
left: 30px;
background-color: #e6addf;
}
:
Misol . Ichki joylashuv
Agar ota-onaning position xususiyati
relative qiymatiga ega bo'lsa,
absolyut pozitsiyalangan elementlar
ota-onaga nisbatan joylashadi:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Misol . Ichki joylashuv
Agar ota-onaning position xususiyati
absolute qiymatiga ega bo'lsa,
absolyut pozitsiyalangan elementlar
ota-onaga nisbatan joylashadi:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: absolute;
top: 30px;
left: 30px;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 0px;
right: 0px;
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Misol . Yopishqoq pozitsiyalash
Agar element uchun position xususiyati
sticky qiymatiga ega bo'lsa, element
relative kabi harakat qiladi, toki belgilangan
pozitsiyaga aylantirish paytida yetmaguncha, shundan so'ng joyga yopishadi.
Keling, yopishqoq sarlavha yarataylik:
<h1>Asosiy Sayt Sarlavhasi</h1>
<div class="header">header header header</div>
<div class="main">
some long text
</div>
h1 {
text-align: center;
}
.header {
position: sticky;
top: 0;
padding: 20px;
background: #f0f0f0;
text-align: center;
font-weight: bold;
}
.main {
width: 400px;
margin: 20px auto;
border: 1px solid #ccc;
padding: 20px;
text-align: justify;
}
:
Misol . Pozitsiyasiz
Agar elementga pozitsiyasiz absolyut pozitsiyalash belgilansa, element pozitsiyalashsiz turgan joyida qoladi, lekin boshqa elementlar uni sezishni to'xtatadi:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
display: inline-block;
}
.elem2 {
position: absolute;
width: 50px;
height: 50px;
background-color: #e6addf;
}
.elem1, .elem3 {
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Misol . Bitta o'q
Absolyut pozitsiyalashda pozitsiyani
faqat bitta o'q bo'yicha belgilash mumkin.
Masalan, agar biz top xususiyatini belgilasak,
vertikal bo'yicha element kerakli
pozitsiyaga joylashadi, gorizontal bo'yicha esa
turgan joyida qoladi:
<div class="container">
<div class="elem elem1"></div>
<div class="elem elem2"></div>
<div class="elem elem3"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
display: inline-block;
}
.elem2 {
position: absolute;
top: 20px;
width: 50px;
height: 50px;
background-color: #e6addf;
}
.elem1, .elem3 {
width: 100px;
height: 100px;
background-color: #add8e6;
}
:
Misol . Barcha pozitsiyalar
Absolyut pozitsiyalashda pozitsiyalarni hamma tomondan belgilash mumkin, kenglik va balandlikni belgilamasdan. Bunda element ota-blokning markaziga joylashadi:
<div class="container">
<div class="elem"></div>
</div>
.container {
position: relative;
border: 1px solid red;
width: 500px;
height: 300px;
}
.elem {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: #add8e6;
}
:
Shuningdek qarang
-
z-indexxususiyati,
bu elementlarning ustma-ust tushishini belgilaydi
