Pozycjonowanie Fixed w CSS3

By /

CSS

Pozycjonowanie fixed w CSS3 pozwala na umieszczenie elementu w określonym miejscu na ekranie, niezależnie od przewijania strony. Element z pozycją fixed jest wyjęty z normalnego flow dokumentu i jest pozycjonowany względem okna przeglądarki.

Cechy pozycji fixed:

  • Element nie przesuwa się wraz ze scrollem strony.
  • Może być używany do tworzenia pasków nawigacyjnych, przycisków “do góry” lub modali, które mają być zawsze widoczne na ekranie.
  • Właściwości top, right, bottom, i left określają położenie elementu względem krawędzi okna przeglądarki.

Przykład użycia pozycji fixed:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Pozycjonowanie Fixed w CSS3</title>
    <style>
        .fixed-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: lightblue;
            text-align: center;
            padding: 10px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }
        
        body {
            padding-top: 60px; /* Odsunięcie treści, 
                   aby nie była zakryta przez nagłówek */
        }
        
        .content {
            height: 2000px; /* Długa treść do 
                              demonstracji przewijania */
        }
    </style>
</head>
<body>

    <div class="fixed-header">Nagłówek pozycjonowany fixed</div>
    <div class="content">Zawartość strony...</div>

</body>
</html>

W tym przykładzie, .fixed-header jest zawsze widoczny na górze ekranu, nawet podczas przewijania strony. Dzięki ustawieniu position: fixed; oraz top: 0; i left: 0;, nagłówek jest “przyklejony” do górnej krawędzi okna przeglądarki.

Kiedy stosować pozycjonowanie fixed:

  • Aby stworzyć elementy interfejsu użytkownika, które muszą być zawsze widoczne, niezależnie od pozycji scrolla (np. paski nawigacyjne, przyciski akcji).
  • W sytuacjach, gdy potrzebujesz, aby ważne komponenty strony (jak powiadomienia lub paski informacyjne) pozostały widoczne na ekranie użytkownika podczas przewijania.

Podsumowanie:

Pozycjonowanie fixed jest potężnym narzędziem w CSS3, umożliwiającym tworzenie interfejsów użytkownika, które są stale widoczne na ekranie niezależnie od przewijania. Jest szczególnie użyteczne w przypadku elementów nawigacyjnych i akcji, które powinny być łatwo dostępne dla użytkownika. Jednakże należy używać go z rozwagą, aby zapewnić, że nie zakłóca to ogólnego doświadczenia użytkownika na stronie.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video Fullstack w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top