Display va position - HTML va CSS

Bu ikki xossa elementning sahifada qanday joylashishini boshqaradi.

Blok va satr elementlari #

Har bir HTML tegining standart display qiymati bor

`display` qiymatlari #

CSS

.blok        { display: block; }          /* butun satr */
.satr        { display: inline; }         /* matn ichida */
.satr-blok   { display: inline-block; }   /* yonma-yon, lekin o'lchamli */
.yashirin    { display: none; }           /* butunlay olib tashlanadi */
.flex        { display: flex; }           /* 13-bo'lim */
.grid        { display: grid; }           /* 14-bo'lim */

Qiymat	Yangi satrdan	`width`/`height`	Vertikal margin
`block`	Ha	Ishlaydi	Ishlaydi
`inline`	Yo'q	Ishlamaydi	Ishlamaydi
`inline-block`	Yo'q	Ishlaydi	Ishlaydi
`none`	-	-	-

CSS

/* Havolani tugmaga aylantirish */
.tugma {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    background: #2563eb;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
}

display: none va visibility: hidden

CSS

.a { display: none; }         /* butunlay yo'q, joy egallamaydi */
.b { visibility: hidden; }    /* ko'rinmaydi, lekin joyi qoladi */
.c { opacity: 0; }            /* shaffof, joyi qoladi, bosish mumkin */

Ekran o'quvchisi display: none va visibility: hidden ni o'qimaydi, lekin opacity: 0 ni o'qiydi. Buni yodda tuting.

`position` #

CSS

.element {
    position: static;      /* standart - oddiy oqim */
    position: relative;    /* o'z joyidan siljitiladi */
    position: absolute;    /* eng yaqin joylashtirilgan otaga nisbatan */
    position: fixed;       /* ekranga nisbatan, aylanmaydi */
    position: sticky;      /* aylantirilganda yopishadi */
}

position: absolute deyarli har doim ota elementga relative bilan juftlashadi

`relative` #

CSS

.siljigan {
    position: relative;
    top: 10px;
    left: 20px;
}

Element o'z joyidan siljiydi, lekin asl joyi bo'sh qoladi. Asosiy vazifasi - absolute bolalar uchun tayanch nuqta bo'lish.

`absolute` #

CSS

.karta {
    position: relative;        /* tayanch nuqta */
}

.karta__belgi {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #dc2626;
    color: #fff;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
}

HTML

<article class="karta">
    <span class="karta__belgi">Yangi</span>
    <img src="mahsulot.jpg" alt="Mahsulot">
    <h3>Klaviatura</h3>
</article>

relative ni unutmang

Agar ota elementda position: relative bo'lmasa, absolute element eng yaqin joylashtirilgan bobosiga yoki butun sahifaga nisbatan joylashadi - va u kutilmagan joyga "uchib ketadi".

Bu position bilan bog'liq eng ko'p uchraydigan xato.

`fixed` #

CSS

.tepa-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    z-index: 100;
}

body {
    padding-top: 64px;      /* panel mazmunni bosib qolmasin */
}

/* Yuqoriga qaytish tugmasi */
.yuqoriga {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

`sticky` #

Eng foydali va eng kam ma'lum qiymat:

CSS

.sarlavha {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
}

/* Jadval sarlavhasi aylantirilganda ko'rinib turadi */
thead th {
    position: sticky;
    top: 0;
    background: #f8fafc;
}

sticky ishlamasa

Uchta sabab bo'lishi mumkin:

top, bottom, left yoki right ko'rsatilmagan - kamida bittasi majburiy.
Ota elementda overflow: hidden yoki overflow: auto bor.
Ota elementning balandligi element balandligiga teng - yopishish uchun joy yo'q.

`z-index` #

Elementlar qaysi biri ustida turishini belgilaydi:

CSS

.fon      { position: relative; z-index: 1; }
.mazmun   { position: relative; z-index: 10; }
.panel    { position: fixed;    z-index: 100; }
.modal    { position: fixed;    z-index: 1000; }

z-index faqat joylashtirilgan elementlarda ishlaydi

CSS

/* Ishlamaydi - position static */
.blok { z-index: 100; }

/* Ishlaydi */
.blok { position: relative; z-index: 100; }

Yana bir tuzoq: z-index faqat bir xil qatlam ichida solishtiriladi. Ota elementda z-index: 1 bo'lsa, uning bolasi z-index: 9999 bo'lsa ham z-index: 2 bo'lgan boshqa oiladan ustun chiqa olmaydi.

CSS

/* Tartibli tizim - tasodifiy raqamlardan qoching */
:root {
    --qatlam-fon: 1;
    --qatlam-mazmun: 10;
    --qatlam-panel: 100;
    --qatlam-ochiluvchi: 500;
    --qatlam-modal: 1000;
    --qatlam-xabar: 2000;
}

.panel { z-index: var(--qatlam-panel); }

`float` - eski usul #

CSS

.rasm-chapda {
    float: left;
    margin: 0 1rem 1rem 0;
}

.tozalash::after {
    content: "";
    display: table;
    clear: both;
}

float bugungi kunda kerakmi?

Ilgari float bilan butun sahifa tuzilmasi qurilardi. Bugun buning uchun Flexbox va Grid bor. float faqat bitta holatda foydali qoldi: matn ichida rasmni o'rab olish - gazetadagi kabi.

CSS

/* Yopishqoq sarlavha */
.sayt-sarlavha {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e2e8f0;
    padding: 1rem 0;
}

/* Modal oyna */
.modal-fon {
    position: fixed;
    inset: 0;                          /* top/right/bottom/left: 0 */
    background: rgba(15, 23, 42, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal {
    position: relative;
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    max-width: 480px;
    width: calc(100% - 2rem);
    max-height: 85vh;
    overflow-y: auto;
}

.modal__yopish {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #f1f5f9;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}

/* Rasm ustidagi belgi */
.mahsulot {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.mahsulot__chegirma {
    position: absolute;
    top: 0;
    left: 0;
    background: #dc2626;
    color: #fff;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 0 0 8px 0;
}

.mahsulot__sevimli {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
}

inset - qisqa yozuv

CSS

/* Uzun */
.blok { top: 0; right: 0; bottom: 0; left: 0; }

/* Qisqa */
.blok { inset: 0; }

Amaliy topshiriq

Sahifa tepasiga position: sticky bilan sarlavha qo'shing.
Mahsulot kartochkasi yarating: burchagida "Chegirma" belgisi (absolute).
O'ng pastda "Yuqoriga qaytish" tugmasini fixed bilan joylashtiring.
Jadval yarating va thead th ni sticky qiling - aylantirib tekshiring.
Modal oyna tuzilmasini yarating (JavaScript siz, faqat CSS bilan ko'rinishini).
z-index tizimini :root da o'zgaruvchilar bilan tashkil qiling.
absolute elementdan position: relative ni ota elementda o'chirib ko'ring - nima bo'lishini kuzating.

Xulosa #

Blok elementlar butun satrni egallaydi, satr elementlarda width/height ishlamaydi.
inline-block ikkalasining afzalligini birlashtiradi - tugmalar uchun qulay.
position: absolute eng yaqin relative otaga nisbatan joylashadi - uni unutmang.
fixed ekranga, sticky esa aylantirishga bog'langan.
sticky uchun top (yoki boshqa tomon) majburiy.
z-index faqat joylashtirilgan elementlarda ishlaydi.
float bugun faqat matn ichida rasmni o'rash uchun ishlatiladi.

Keyingi bo'limda zamonaviy joylashuvning asosiy vositasi - Flexbox ni o'rganamiz.

Blok va satr elementlari #

display qiymatlari #

position #

relative #

absolute #

fixed #

sticky #

z-index #

float - eski usul #

Amaliy misol: yopishqoq sarlavha va modal #