Pozycjonowanie stałe

Część sekcji Stylizacja za pomocą CSS ścieżki HTML w Coddy. Lekcja 58 z 76.

W CSS pozycjonowanie stałe utrzymuje element w tym samym miejscu na ekranie, niezależnie od tego, jak daleko przewiniesz stronę. Gdy ustawisz position: fixed;, element zostaje usunięty z normalnego układu, więc inne elementy go ignorują. Pozostaje przypięty do okna przeglądarki, dzięki czemu sprawdza się w przypadku nagłówków, stopek lub menu, które powinny być zawsze widoczne.

Oto podstawowa składnia używania pozycjonowania stałego:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: fixed;: Ta deklaracja ustawia pozycjonowanie elementu na stałe.

top, right, bottom, left: Te właściwości określają położenie elementu względem obszaru widoku. Możesz używać wartości dodatnich lub ujemnych, określonych w pikselach (px), emach (em), procentach (%) lub innych prawidłowych jednostkach CSS.

Na przykład:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

W tym przykładzie element z klasą header jest przypięty do górnej krawędzi obszaru widoku za pomocą position: fixed;, top: 0; i left: 0;.

Wyzwanie

Łatwy

Otrzymujesz dokument HTML z nagłówkiem (<div>) i akapitem (<p>). Twoim zadaniem jest użycie pozycjonowania stałego, aby nagłówek pozostawał u góry obszaru widoku nawet podczas przewijania strony. Wykonaj poniższe kroki:

Napisz regułę CSS, która wybiera element <div> z klasą header.
Ustaw właściwość position elementu .header na fixed.
Ustaw właściwość top elementu .header na 0, a właściwość left na 0. Spowoduje to umieszczenie nagłówka w lewym górnym rogu obszaru widoku.
Ustaw właściwość width elementu .header na 100%, aby rozciągał się na całą szerokość obszaru widoku.
Ustaw właściwość background-color elementu .header na #fcc726 (złocisty żółty), aby nagłówek był widoczny na tle zawartości strony.
Ustaw właściwość text-align na center, aby tekst wyglądał lepiej.

Spróbuj swoich sił

<html>
<head>
    <title>Fixed Positioning</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="header">This is the header</div>
    <p>This is some content below the header. Scroll down to see the fixed positioning in action.</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
</body>
</html>