roadmap.az

Menyu

HTML & CSSDərs 10 / 16

Səhifə yığımı və mövqeləşmə

Əvvəl semantik quruluş

header giriş hissəsi, nav əsas keçidlər, main səhifənin əsas məzmunu, section mövzulu bölmə, footer yekun məlumat üçündür. Elementi görünüşünə görə deyil, məzmunun roluna görə seç.

<header><nav><a href="#products">Məhsullar</a></nav></header>
<main><section id="products"><h1>Məhsullar</h1>
  <article class="card"><h2>Çanta</h2><span class="badge">Yeni</span></article>
</section></main>
<footer>Əlaqə məlumatı</footer>
Nümunə
.card { position: relative; padding: 32px; }
.badge { position: absolute; top: 8px; right: 8px; }
Nümunə

Mövqeləşmənin dörd davranışı

static adi axındır; top/left yerdəyişmələri ona tətbiq olunmur. relative elementin ilkin yerini saxlayıb görünüşünü sürüşdürür. absolute normal axından çıxır və uyğun yerləşdirmə konteynerinə əsaslanır; burada o, relative kartdır. fixed adətən viewport-a görə qalır.

top, right, bottom, left kənarlardan məsafəni təyin edir. Üst-üstə düşmədə z-index və stacking context də rol oynayır; sadəcə çox böyük rəqəm yazmaq hər vəziyyəti həll etmir. Səhifənin bütün layout-unu absolute koordinatlarla qurmaqdan çəkin.

Əlavə qeydlər və mənbələr

Semantik bloklarla səhifənin əsas hissələrini ayır. static, relative, absolute və fixed mövqelərini müqayisə et; absolute elementin hansı konteynerə görə yerləşdiyini və normal axından çıxmasını yoxla.

Niyə vacibdir?

CSS qaydalarını anlamaq dizaynı təsadüfi düzəlişlərlə deyil, məqsədli şəkildə qurmağa imkan verir.

Əvvəlki biliklər

Bu mövzuda

  • header, main, section və footer
  • static, relative, absolute və fixed
  • top, right, bottom və left

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi
Addım 1 / 3

Nişanı axından çıxar

İlk kartın mövqeyini dəyiş. absolute seçəndə digər kartların davranışına bax.

Hədəf: İlk kartı absolute mövqeyə keçir.

1
2
3
.element { position: static; }

Özün sına

Semantik səhifə qur və kartın küncünə absolute nişan əlavə et. Valideyni relative et, sonra səhifəni sürüşdürərək fixed elementlə fərqi yoxla.

Nəticəni necə yoxlayım?

Semantik səhifə qurulur, absolute nişan öz kartına görə yerləşir və fixed element sürüşdürüləndə davranışını saxlayır.

Gözlənilən nəticə

  • Yeni nişanı kartın küncündə qalır.
  • Sürüşdürəndə kart hərəkət edir, fixed kömək düyməsi ekranın küncündə qalır.
Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

Nişanın koordinatları relative kartdan, fixed kömək düyməsinin koordinatları isə baxış sahəsindən hesablanır.

index.html

<!doctype html>
<html lang="az">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Nümunə səhifə</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<header><h1>Mağaza</h1></header><main><article class="card"><span class="badge">Yeni</span><h2>Kitab</h2><p>Oxumağa başla.</p></article><p class="spacer">Səhifəni sürüşdür.</p></main><footer>Mağazanın sonu</footer><button class="help" type="button">Kömək</button>
</body>
</html>

styles.css

.card{position:relative;padding:24px;background:#dce9f7}.badge{position:absolute;top:8px;right:8px;background:#e9f881;padding:4px}.help{position:fixed;bottom:12px;right:12px}.spacer{min-height:400px}

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.