Moduł 4 - Zajęcia 7 - Pozycjonowanie elementów

4.1 Pseudoelementy

Pseudoelementy ::before i ::after służą do dodawania efektów dekoracyjnych (ikon, tabliczek, nakładek) bez konieczności tworzenia dodatkowych pustych tagów w znacznikach.

• ::before - tworzy pseudoelement przed całą zawartością elementu (na początku).
• ::after - tworzy pseudoelement po całej zawartości elementu (na końcu).

            .box {
              /* style elementów */
            }

            .box::before {
              /* style pseudoelement before */
            }

            .box::after {
              /* style pseudoelement after */
            }
          

Ta wymagana właściwość umożliwia dodawanie treści tekstowej do pseudoelementu. Nawet jeśli treść tekstowa nie jest potrzebna, jej wartość musi być ustawiona na pusty wiersz, w przeciwnym razie przeglądarka po prostu nie utworzy pseudoelementu.

            <div class="box">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officia itaque quia
              nobis fugit amet adipisci, corrupti animi, iusto eius a sed totam voluptas
              porro. Dolorem aliquid rerum magnam eligendi aspernatur.
            </div>
          

W selektorze można użyć tylko jednego pseudoelementu, który należy dodać po prostym selektorze (po tagu, klasie, identyfikatorze).

            .box::before {
              content: 'To jest tekst w ::before';
              font-size: 40px;
              color: orange;
            }

            .box::after {
              content: 'To jest tekst w ::after';
              font-size: 30px;
              color: teal;
            }
          

UWAGA!: Nie używaj pseudoelementów do dodawania treści tekstowych, jest to naruszenie specyfikacji, służą one wyłącznie do dekoracji. Tekst wewnątrz pseudoelementu nie jest postrzegany przez technologie wspomagające i indeksatory, a także będzie niedostępny dla użytkownika, jeśli arkusz stylów nie jest załadowany.

4.2 Pseudoklasa :hover

Aby zmienić style pseudoelementu, gdy na elemencie rodzicielskim wystąpi zdarzenie, na przykład najechanie kursorem, musisz użyć następującego selektora.

            /* Zastosuj style do pseudoelementu .box::before podczas najechania kursorem na element .box */
            .box:hover::before {
              color: green;
            }

            /* Zastosuj style do pseudoelementu .box::after podczas najechania kursorem na element .box */
            .box:hover::after {
              color: tomato;
            }
          

4.3 Pseudoelement ikona

Używając pseudoelementów, dodamy ikony przed i po linkach na liście. Niech ::before będzie zawsze widoczne, a ::after tylko przy najechaniu kursorem na link.

Najważniejsze znajduje się w tej regule CSS. Zmieniamy typ elementu na liniowo-blokowy i ustawiamy stałą wysokość i szerokość. Nie zapomnijmy również określić właściwości content z pustym wierszem, aby przeglądarka utworzyła pseudoelement.

            .list-link::before,
            .list-link::after {
              content: '';
              display: inline-block
              width: 24px;
              height: 24px;
            }
          

• Strona główna
• O nas
• Kontakt

5.1 Elementy pozycjonowane

Elementy na stronie są domyślnie ułożone od lewej do prawej i od góry do dołu. Jeśli chcesz umieścić jeden element na drugim, użyj właściwości position. Pozwala ona dosłownie umieścić element na dowolnym innym elemencie. Właściwość position zmienia typ pozycjonowania elementu.

Istnieje kilka podstawowych wartości właściwości position:

Wartością domyślną jest static.

Pozycjonowanie statyczne (static) jest początkowym stanem wszystkich elementów strony internetowej. Model blokowy i flexbox wykorzystują na stronie właśnie elementy statyczne.

Zdecydowana większość elementów na stronie powinna być elementami statycznymi. Inne rodzaje pozycjonowania są używane dla efektów graficznych, gdy nie jest możliwe pozycjonowanie ich w inny sposób.

Element, którego wartość właściwości position jest inna niż static jest nazywany "elementem pozycjonowanym".

Pozycjonowanie względne (relative), bezwzględne (absolute) i stałe (fixed) elementu umożliwiają ręczne pozycjonowanie go przy użyciu układu współrzędnych. Dziedziczenie układu współrzędnych zależy od typu pozycjonowania. Przeanalizujemy każdy typ osobno w kolejnych sekcjach. Aby określić pozycję elementu, należy użyć właściwości top, left, bottom lub right, których nie stosuje się do elementów bez position.

5.2 Pozycjonowanie względne: relative

W przypadku pozycjonowania względnego element pozostaje nieruchomo na ekranie, co oznacza, że sąsiednie elementy nie zajmują jego miejsca. Jednak wizualnie, element może zostać przesunięty z pierwotnej pozycji i może nachodzić na swoich sąsiadów.

Właściwości top, left, bottom i right pozwalają określić wizualne przesunięcie elementu względem pierwotnej pozycji. Mogą mieć też wartość ujemną.

Pozycjonowanie względne nie jest używane samodzielnie, ponieważ element nie jest usuwany ze strony i nadal znajduje się na swoim miejscu. Dlatego pozycjonowanie względne jest używane tylko w połączeniu z pozycjonowaniem bezwzględnym.

•   &.box2_5-1 {
      position: relative;
      top: 120px;
      left: 120px;
    }
                

5.3 Pozycjonowanie bezwzględne: absolute

Pozycjonowanie bezwzględne daje zupełnie inne wyniki niż pozycjonowanie względne.

1. W przypadku pozycjonowania bezwzględnego element jest usuwany ze strony, tzn. jego miejsce zajmują sąsiednie elementy.
2. Możesz ustawić pozycję elementu za pomocą właściwości top, left, bottom i right, ale pamiętaj, aby uwzględnić, skąd pochodzą wartości tych właściwości.
3. Aby określić punkt początkowy, przeglądarka szuka najbliższego elementu przodka, który ma jakąkolwiek wartość inną niż static dla właściwości position. Jeśli taki przodek nie zostanie znaleziony, wartości będą liczone od obramowania elementu <body>.

Pozycjonowanie bezwzględne samo w sobie nie jest zbyt użyteczne. Zwykle jest używane w połączeniu z pozycjonowaniem względnym do pozycjonowania elementów. Oznacza to, że element jest pozycjonowany bezwzględnie względem jakiegoś przodka, który znajduje się na stronie.

W tym przypadku wartości top, left, bottom i right dla elementu pozycjonowanego bezwzględnie są liczone od ramki przodka, a nie od <body>. Dlatego używamy position: relative przodka tylko po to, aby bezwzględnie pozycjonowany element znajdował się w położeniu względnym wobec niego.

Zapis bottom: 20px oznacza odległość między dolną częścią względnie pozycjonowanego przodka a dolną częścią bezwzględnie pozycjonowanego elementu. right, left i top działają w ten sam sposób — określają odległość pomiędzy przodkiem a krawędzią elementu o tej samej nazwie.

•   &.box2_5-1 {
      position: absolute;
      top: 120px;
      left: 120px;
    }
                

• 

  Samochód tekst 1

• 

  Samochód 2

• 

  Samochód 3

• 

  Samochód 4

5.4 Pozycjonowanie stałe: fixed

Przy pozycjonowaniu stałym element ma wartość position: fixed. Taki element jest pozycjonowany względem obszaru wyświetlania. Daje to efekt umocowania elementu w określonym miejscu ekranu podczas przewijania strony.

Pozycjonowanie stałe jest używane do nieruchomych nagłówków z nawigacją, okien, czatów z menedżerem na stronach sklepów internetowych itp.

Utwórzmy przycisk czatu z menedżerem button.chat-button i umieśćmy go w prawym dolnym rogu obszaru wyświetlania. Podczas przewijania strony przycisk pozostaje na swoim miejscu, ponieważ ma stałą pozycję.

5.5 Pozycjonowanie lepkie: sticky

Pozycjonowanie lepkie (position: sticky) to połączenie właściwości relative i fixed. Spójrz na gif, gdzie pozycjonowanie lepkie jest ustawione dla elementów z literami A i B i od razu wszystko zrozumiesz.

1. Dopóki element znajduje się w swoim kontenerze, a kontener nie znika z obszaru wyświetlania podczas przewijania w pionie, element zachowuje się jak element pozycjonowany względnie (relative).
2. Gdy część kontenera nadrzędnego opuści obszar, element pozostanie zamocowany na stronie tak długo, jak przynajmniej część kontenera będzie znajdować się na ekranie.
3. Jeśli cały kontener znajdzie się poza obszarem, zostanie ponownie włączone zachowanie, jak w przypadku pozycjonowania względnego — element zniknie z ekranu wraz z kontenerem.

Aby zaimplementować pozycjonowanie lepkie, wymagane są tylko trzy warunki:

• Element lepki musi być ustawiony na position: sticky.
• Element sticky musi mieć określoną pozycję, na przykład top: 0.
• Element kontenera musi być wyższy (wyżej zagnieżdżony) niż element lepki.

Nagłówki sekcji w przykładzie są lepkie, więc gdy przewiniesz stronę, "przykleją się" do górnej części obszaru wyświetlania, dopóki część ich sekcji nie będzie widoczna.

.background-attachment-main-container_1-6 {
  position: relative;
  height: 50vh;
  margin: 40px 0;
  overflow: auto;

  .background-attachment-container_1-6 {
    position: relative;
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
      url(../../images/image/gory.jpg);
    background-color: rgba(0, 0, 0, 1);
    background-size: cover;
    background-attachment: fixed;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: rgba(0, 0, 0, 0.1);
      transition: opacity 1.4s ease, background-color 1.4s ease;
    }

    &:hover::before {
      // opacity: 0.4;
      background-color: rgba(0, 0, 0, 0.7);
    }
  }

  .background-attachment-text-container_1-6 {
    position: relative;

    .background-attachment-header_1-6 {
      position: sticky;
      top: 0;
      text-align: center;
      background-image: linear-gradient(to bottom, #6a11cb 0%, #2575fc 100%);
    }

    .background-attachment-text_1-6 {
      color: white;
    }
  }
}
                

                    position: absolute | relative | fixed | sticky.
                  

                    top: ...;
                    right: ...;
                    bottom: ...;
                    left: ...;
                  

                    inset: top right bottom left;
                  

                    inset: 10px 20px 30px 40px;
                  

                    top: 10px;
                    right: 20px;
                    bottom: 30px;
                    left: 40px;
                  

                    inset: 0;
                  

                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: 0;
                  

                    .overlay {
                      position: absolute;
                      inset: 0;
                    }
                  

                    .box {
                      position: absolute;
                      inset: 20px;
                    }
                  

5.6 Właściwość: z-index

Zanim nie zaczęliśmy uczyć się pozycjonowania elementów, nie mieliśmy do czynienia z kwestiami dotyczącymi głębokości. Umieszczaliśmy elementy w dwuwymiarowym układzie współrzędnych — x poziomo i y pionowo. Kolejność wyświetlania była ustalana wyłącznie przez zagnieżdżenie elementów: przodek znajdował się na dole, a potomek po prostu — na górze.

Elementy pozycjonowane zachowują się inaczej — potrzebują reguły określającej, który element znajduje się powyżej lub poniżej na osi z (oś prostopadła do płaszczyzny ekranu).

Tę regułę ustawia właściwość z-index, która kontroluje głębokość (kolejność) pozycjonowanych elementów na stronie wzdłuż osi z. Wartość może być dowolną liczbą całkowitą, w tym ujemną.

Wspólny przodek pozycjonowanych elementów tworzy kontekst (stacking context) — obszar, w którym właściwość z-index elementu wpływa na inne elementy z-index.

Co musisz wiedzieć używając z-index:

• Im wyższa wartość z-index wewnątrz kontekstu, tym wyżej znajduje się element.
• Minimalna (nawet ujemna) wartość z-index oznacza, że inne elementy będą znajdować się powyżej tego elementu.
• Jeśli dwa elementy mają taką samą wartość z-index, element zadeklarowany jako ostatni w kodzie HTML będzie wyżej.

• z-index 1
• z-index 2
• z-index 3
• z-index 4