Właściwość position CSS

Właściwość position CSS jest jedną z kluczowych narzędzi pozwalających na precyzyjne rozmieszczenie elementów na stronie internetowej. Dzięki niej możemy dokładnie kontrolować, gdzie poszczególne elementy mają się pojawiać, a także jak mają reagować na inne elementy na stronie. Dlatego w tym artykule omówię różne wartości właściwości position, ich zastosowania oraz jak ich używać w praktyce.

selektor { position: wartość; }

Właściwość position może przyjmować wartości:

static
relative
absolute
fixed
sticky

Static

Domyślną wartością właściwości position jest static. Oznacza to, że elementy pojawiają się jeden po drugim, bez specjalnego pozycjonowania.

.element {
  position: static; /* Domyślna wartość */
}

Relative

Wartość relative pozwala na pozycjonowanie elementu względem jego normalnego położenia w dokumencie. Można to osiągnąć przy pomocy właściwości top, right, bottom i left.

.relative-element {
  position: relative;
  top: 20px; /* Przesuwa element o 20px w dół od jego normalnej pozycji */
  left: 10px; /* Przesuwa element o 10px w prawo od jego normalnej pozycji */
}

Tekst nie pozycjonowany.

Tekst pozycjonowany relatywnie.

Absolute

Elementy o wartości absolute są pozycjonowane względem najbliższego elementu nadrzędnego, który ma pozycjonowanie inne niż static (najczęściej relative, absolute, fixed, lub sticky). Jeśli takiego elementu nie ma, element będzie pozycjonowany względem początku strony.

.container {
  position: relative; /* Ustawienie pozycjonowania nadrzędnego */
}

.absolute-element {
  position: absolute;
  top: 50px;
  left: 30px; /* Pozycjonowanie względem najbliższego elementu nadrzędnego */
}

Fixed

Elementy o wartości fixed są pozycjonowane względem okna przeglądarki. Oznacza to, że pozostają one na swoim miejscu nawet podczas przewijania strony.

.fixed-element {
  position: fixed;
  top: 10px;
  right: 10px; /* Element pozostaje w prawym górnym rogu okna przeglądarki */
}

Sticky

Wartość sticky pozwala na połączenie pozycjonowania relative i fixed. Element z position: sticky jest pozycjonowany względem swojego kontenera, dopóki nie osiągnie pewnej pozycji podczas przewijania, a następnie zachowuje się jak fixed.

.sticky-element {
  position: sticky;
  top: 0; /* Element przykleja się do górnej części okna po przewinięciu */
}

Praktyczne przykłady zastosowania `position`

Przykład: Nagłówek strony zawsze widoczny

Za pomocą position: fixed, możemy stworzyć nagłówek, który zawsze pozostaje widoczny na górze strony.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nagłówek Fixed</title>
  <style>
    .header {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: lightblue;
      padding: 10px;
      z-index: 1000; /* Zapewnia, że nagłówek będzie nad innymi elementami */
    }
    
    .content {
      margin-top: 50px; /* Umożliwia przewijanie treści pod nagłówkiem */
    }
  </style>
</head>
<body>
  <div class="header">Nagłówek Fixed</div>
  <div class="content">
    <p>Długi tekst...</p>
    <p>Długi tekst...</p>
    <p>Długi tekst...</p>
    <!-- Więcej treści -->
  </div>
</body>
</html>

Przykład: Ustawienie obrazu w prawym dolnym rogu

Za pomocą position: absolute, możemy umieścić obrazek w prawym dolnym rogu jego kontenera.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Obraz Absolute</title>
  <style>
    .container {
      position: relative;
      width: 300px;
      height: 300px;
      background-color: lightgray;
    }
    
    .absolute-image {
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="example.jpg" alt="Example Image" class="absolute-image">
  </div>
</body>
</html>

Przykład: Sticky menu

Za pomocą position: sticky, możemy stworzyć menu, które pozostaje widoczne na górze ekranu po przewinięciu do pewnego punktu.

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu Sticky</title>
  <style>
    .menu {
      position: sticky;
      top: 0;
      background-color: lightgreen;
      padding: 10px;
    }
    
    .content {
      height: 2000px; /* Dodanie dużej ilości treści dla przewijania */
    }
  </style>
</head>
<body>
  <div class="menu">Sticky Menu</div>
  <div class="content">
    <p>Długi tekst...</p>
    <p>Długi tekst...</p>
    <p>Długi tekst...</p>
    <!-- Więcej treści -->
  </div>
</body>
</html>

Uwagi i najlepsze praktyki

Zrozumienie z-index

Kiedy elementy są pozycjonowane, mogą się nawzajem nachodzić. Dlatego aby kontrolować, który element jest wyświetlany na wierzchu, można użyć właściwości z-index. Elementy z wyższym z-index będą wyświetlane nad elementami z niższym z-index.

.element1 {
  position: absolute;
  z-index: 10;
}

.element2 {
  position: absolute;
  z-index: 20;
}