Lekcje
Rozpocznij
Rozpocznij naukę
CodeGym /Kurs Javy /Frontend SELF PL /Pozycjonowanie względne

Pozycjonowanie względne

Frontend SELF PL
Poziom 21 , Lekcja 2
Dostępny

3.1 position: relative

Pozycjonowanie względne w CSS pozwala elementom poruszać się względem ich pierwotnego położenia w przepływie dokumentu. Przy użyciu position: relative element zachowuje swoje miejsce w normalnym przepływie, ale można przesuwać go za pomocą właściwości top, right, bottom i left. Te właściwości pozwalają przesunąć element względem jego zwykłego położenia.

Główne zasady pozycjonowania względnego

Przy pozycjonowaniu względnym (position: relative) element porusza się z pierwotnego położenia w przepływie dokumentu. To przesunięcie wpływa tylko na sam element, a inne elementy pozostają na swoich miejscach, jak gdyby element nie został przesunięty. To pozwala tworzyć efekty, gdzie elementy zachodzą na siebie lub tworzą dodatkowe wizualne odstępy.

Składnia:

    
      .element {
        position: relative;
        top: wartość;
        right: wartość;
        bottom: wartość;
        left: wartość;
      }

Gdzie:

  • top: przesuwa element w dół względem jego normalnego położenia
  • right: przesuwa element w lewo względem jego normalnego położenia
  • bottom: przesuwa element w górę względem jego normalnego położenia
  • left: przesuwa element w prawo względem jego normalnego położenia
  • <wartość>: może być dowolną dopuszczalną wartością długości w CSS (px, %, em itp.)
Java university

3.2 Właściwość top

Właściwość top przesuwa element w dół względem jego pierwotnego położenia.

Przykład użycia top:

CSS
    
      .relative-top {
        position: relative;
        top: 20px; /* Przesuwa element w dół o 20 pikseli */
      }

Przykład użycia:

CSS
    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-top {
        position: relative;
        top: 20px;
        background-color: lightblue;
      }
HTML
    
      <div class="container">
        <div class="box static-box">To jest zwykły blok</div>
        <div class="box relative-top">Ten blok będzie przesunięty w dół o 20px.</div>
        <div class="box static-box">To jest zwykły blok</div>
      </div>

3.3 Właściwość right

Właściwość right przesuwa element w lewo względem jego pierwotnego położenia.

Przykład użycia right:

CSS
    
      .relative-right {
        position: relative;
        right: 20px; /* Przesuwa element w lewo o 20 pikseli */
      }

Przykład użycia:

CSS
    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-right {
        position: relative;
        right: 20px;
        background-color: lightgreen;
        padding: 20px;
      }
HTML
    
      <div class="container">
        <div class="box static-box">To jest zwykły blok</div>
        <div class="box relative-right">Ten blok będzie przesunięty w lewo o 20px.</div>
        <div class="box static-box">To jest zwykły blok</div>
      </div>

3.4 Właściwość bottom

Właściwość bottom przesuwa element w górę względem jego pierwotnego położenia.

Przykład użycia bottom:

CSS
    
      .relative-bottom {
        position: relative;
        bottom: 20px; /* Przesuwa element w górę o 20 pikseli */
      }

Przykład użycia:

CSS
    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-bottom {
        position: relative;
        bottom: 20px;
        background-color: lightcoral;
        padding: 20px;
      }
HTML
    
      <div class="container">
        <div class="box static-box">To jest zwykły blok</div>
        <div class="box relative-bottom">Ten blok będzie przesunięty w górę o 20px.</div>
        <div class="box static-box">To jest zwykły blok</div>
      </div>

3.5 Właściwość left

Właściwość left przesuwa element w prawo względem jego pierwotnego położenia.

Przykład użycia left:

CSS
    
      .relative-left {
        position: relative;
        left: 20px; /* Przesuwa element w prawo o 20 pikseli */
      }

Przykład użycia:

CSS
    
      .container {
        min-height: 200px;
      }

      .box {
        padding: 20px;
      }

      .static-box {
        background-color: lightgray;
      }

      .relative-left {
        position: relative;
        left: 20px;
        background-color: lightgoldenrodyellow;
        padding: 20px;
      }
HTML
    
      <div class="container">
        <div class="box static-box">To jest zwykły blok</div>
        <div class="box relative-left">Ten blok będzie przesunięty w prawo o 20px.</div>
        <div class="box static-box">To jest zwykły blok</div>
      </div>

3.6 Interakcja z przyległymi elementami

Elementy z position: relative pozostają w normalnym przepływie dokumentu, co oznacza, że nadal zajmują przestrzeń, którą zajmowałyby, gdyby nie były przesunięte. To pozwala przesuwać elementy bez zmiany położenia innych elementów na stronie.

Przykład użycia:

CSS
    
      .container {
        border: 2px solid #000;
        padding: 10px;
      }

      .box {
        position: relative;
        background-color: #e74c3c;
        color: white;
        padding: 20px;
        margin: 10px;
        width: 200px;
      }

      .box1 {
        top: 20px;
      }

      .box2 {
        left: 20px;
      }
HTML
    
      <div class="container">
        <div class="box box1">Element 1 (przesunięty w dół)</div>
        <div class="box box2">Element 2 (przesunięty w prawo)</div>
        <div class="box">Element 3 (normalne położenie)</div>
      </div>

Wyjaśnienie kodu:

  • .box1: element przesunięty w dół o 20 pikseli, ale jego miejsce w normalnym przepływie zostaje, co oznacza, że inne elementy będą się ustawiać względem jego pierwotnego położenia
  • .box2: element przesunięty w prawo o 20 pikseli, ale jego miejsce w normalnym przepływie zostaje
Komentarze
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION