Jak korzystać z position w CSS 3?

By /

CSS

Właściwość position w CSS jest jednym z fundamentów, pozwalającym na precyzyjne umiejscowienie elementów na stronie. Pozwala ona na kontrolę nad tym, jak elementy są rozmieszczane w kontekście przepływu dokumentu, a także w jaki sposób reagują na zmiany rozmiaru i przewijanie strony. W CSS 3, właściwość position może przyjmować kilka wartości: static, relative, absolute, fixed, i sticky. Każda z nich umożliwia różne zachowania elementów.

Przykład użycia position w CSS

W poniższym przykładzie przedstawiamy prostą stronę HTML z zastosowaniem różnych wartości właściwości position. Skrypt JavaScript będzie użyty do demonstracji interaktywności związanej z pozycjonowaniem.

Kod HTML i CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład użycia position w CSS</title>
<style>
  .static {
    position: static;
    background-color: lightgray;
  }

  .relative {
    position: relative;
    left: 20px;
    top: 10px;
    background-color: lightblue;
  }

  .absolute {
    position: absolute;
    right: 20px;
    bottom: 10px;
    background-color: lightgreen;
  }

  .fixed {
    position: fixed;
    bottom: 0;
    right: 0;
    background-color: lightcoral;
  }

  .sticky {
    position: sticky;
    top: 0;
    background-color: lightgoldenrodyellow;
  }

  .container {
    height: 500px;
    position: relative;
  }
</style>
</head>
<body>

<div class="static">Statyczny</div>
<div class="relative">Relatywny</div>
<div class="container">
  <div class="absolute">Absolutny</div>
</div>
<div class="fixed">Stały</div>
<header class="sticky">Lepki</header>

<script>
// Skrypt do demonstracji, jak można zmieniać
// właściwości CSS z JavaScript

// Zmienia kolor tła dla elementu o klasie .relative
const relativeElement = document.querySelector('.relative');
relativeElement.style.backgroundColor = 'skyblue';

</script>
</body>
</html>

Wyjaśnienie kodu

  • Statyczny (static): Domyślna wartość dla elementów. Element jest umieszczony zgodnie z normalnym przepływem dokumentu.
  • Relatywny (relative): Pozwala na umieszczenie elementu względem jego normalnej pozycji bez wpływu na układ innych elementów.
  • Absolutny (absolute): Pozycjonuje element względem najbliższego umieszczonego (nie statycznego) elementu nadrzędnego.
  • Stały (fixed): Element jest pozycjonowany względem okna przeglądarki i nie przesuwa się wraz ze scrollem strony.
  • Lepki (sticky): Element jest traktowany jako relative do momentu osiągnięcia określonego punktu podczas przewijania, w którym to zachowuje się jak fixed.

Podsumowanie

Właściwość position w CSS jest potężnym narzędziem, które pozwala na precyzyjne kontrolowanie położenia elementów na stronie. Rozumienie różnic między poszczególnymi wartościami position oraz ich zastosowanie w praktyce jest kluczowe dla tworzenia złożonych i responsywnych układów stron internetowych. Przykład pokazuje podstawowe zastosowanie każdej z wartości i jak mogą one wpłynąć na układ strony.

Powiązane artykuły

Scroll to Top