Position w CSS3

W CSS3, właściwość position jest kluczowym elementem, który pozwala deweloperom na precyzyjne umiejscowienie elementów na stronie internetowej. Właściwość ta definiuje, jak element jest pozycjonowany w przestrzeni dokumentu, co ma kluczowe znaczenie dla układu strony i interakcji z użytkownikiem. Istnieje kilka wartości, które można przypisać do właściwości position, każda z nich oferuje różne możliwości i zastosowania.

Przykłady użycia position

W poniższym przykładzie zaprezentowane są różne wartości właściwości position oraz ich zastosowania. Każdy przykład zawiera opis ilustrujący, co dany przykład pokazuje, oraz komentarze w kodzie wyjaśniające szczegóły implementacji.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Przykłady użycia 'position' w CSS3</title>
    <style>
        /* Styl bazowy dla kontenerów */
        .container {
            width: 100%;
            border: 2px solid black;
            margin-bottom: 20px;
        }

        /* Styl dla elementów statycznych */
        .static {
            position: static;
            background-color: lightblue;
        }

        /* Styl dla elementów z pozycją relative */
        .relative {
            position: relative;
            top: 20px; /* Przesunięcie względem normalnej pozycji */
            left: 20px;
            background-color: lightgreen;
        }

        /* Styl dla elementów z pozycją absolute */
        .absolute {
            position: absolute;
            top: 40px; /* Pozycjonowanie względem najbliższego pozycjonowanego przodka */
            left: 40px;
            background-color: lightcoral;
        }

        /* Styl dla elementów z pozycją fixed */
        .fixed {
            position: fixed;
            bottom: 0; /* Pozycjonowanie względem okna przeglądarki */
            right: 0;
            background-color: lightgoldenrodyellow;
        }

        /* Styl dla elementów z pozycją sticky */
        .sticky {
            position: sticky;
            top: 0; /* Pozycjonowanie jako 'sticky' na górze viewport */
            background-color: lightsalmon;
        }
    </style>
</head>
<body>
    <div class="container static">Static - domyślne pozycjonowanie elementu.</div>
    <div class="container relative">Relative - element przesunięty o 20px w dół i w prawo.</div>
    <div class="container" style="position: relative;">
        <div class="absolute">Absolute - element pozycjonowany absolutnie względem najbliższego pozycjonowanego przodka.</div>
    </div>
    <div class="fixed">Fixed - element pozycjonowany względem okna przeglądarki.</div>
    <div class="container sticky">Sticky - element 'przylepiony' do góry viewport przy przewijaniu.</div>
</body>
</html>

Wartości position

  • static: Domyślne pozycjonowanie elementu zgodnie z normalnym przepływem dokumentu.
  • relative: Pozycjonowanie elementu względem jego normalnej pozycji, bez zmiany układu innych elementów.
  • absolute: Pozycjonowanie elementu względem najbliższego pozycjonowanego przodka (nie static), element jest usuwany z normalnego przepływu dokumentu.
  • fixed: Element jest pozycjonowany względem okna przeglądarki, pozostaje na stałej pozycji przy przewijaniu strony.
  • sticky: Kombinacja pozycji relative i fixed, element jest “przylepiony” do określonej pozycji przy przewijaniu, aż osiągnie granicę swojego kontenera

Podsumowanie

Właściwość position w CSS3 umożliwia deweloperom precyzyjne kontrolowanie układu elementów na stronie. Każda z wartości position służy innemu celowi i może być wykorzystana w różnych scenariuszach, od prostej modyfikacji pozycji elementu (relative), przez absolutne pozycjonowanie względem przodka (absolute), po specyficzne zachowania, takie jak pozycjonowanie stałe (fixed) czy “przylepianie” elementu w określonym miejscu podczas przewijania (sticky).

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

Poprzedni
Następny
Scroll to Top