CSS3 - Pozycja niestatyczna elementu HTML w kontekście przekształceń w przestrzeni

Zapoznając się z częścią Pozycja statyczna, relatywna, absolutna oraz ustalona dowiedzieliśmy się, że każdy element HTML domyślnie jest wyświetlony w pozycji statycznej, którą określa wartość static właściwości position. Domyślną pozycję statyczną elementu HTML możemy zmienić za pomocą wspomnianej właściwości position oraz wartości relative lub absolute lub fixed. Gdy element HTML nie jest elementem statycznym, czyli gdy została do niego dodana właściwość position:relative; lub position:absolute; lub position:fixed; pozycję niestatycznego elementu HTML możemy kontrolować za pomocą właściwości top, right, bottom, left, których wartości będą liczone względem krawędzi pozycji początkowej danego elementu HTML (gdy jest on wyświetlony w pozycji position:relative;), lub których wartości będą liczone względem krawędzi okna przeglądarki internetowej (gdy jest on wyświetlony w pozycji position:fixed;), lub których wartości będą liczone względem krawędzi pierwszego niestatycznego elementu przodka interesującego nas elementu HTML (gdy dany interesujący nas element potomek jest wyświetlony w pozycji position:absolute;), ponadto gdy dany interesujący nas element potomek nie posiada niestatycznego przodka (czyli elementu HTML, do którego została dodana właściwość position wraz z wartością relative lub absolute lub fixed) wspomniane wartości właściwości top, right, bottom, left są liczone względem krawędzi okna przeglądarki internetowej.

Do tych wszystkich wcześniej poznanych oraz wyżej wymienionych zasad dochodzi jeszcze jedna reguła, którą poznamy w tej części kursu CSS.

Na początek utworzymy przykładowy układ elementów HTML.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      #div1 {
        width:100%;
        height:400px;
        background-color:red;
      }

      #div2 {
        width:80%;
        height:300px;
        background-color:green;
      }

      #div3 {
        width:60%;
        height:200px;
        background-color:black;
      }
    </style>
  </head>

  <body>

    <div id="div1">
      <div id="div2">
        <div id="div3"></div>
      </div>
    </div>

  </body>
</html>

Rezultat:

Nasz przykładowy układ elementów HTML przedstawia trzy elementy div czyli kolejno elementy #div1, #div2, #div3, które zostały umieszczone jeden w drugim. Dla wspomnianych elementów HTML została określona różna szerokość, różna wysokość oraz różny kolor tła. Spróbujmy sprawić, aby element #div3 (element z czarnym kolorem tła) został przesunięty do prawej oraz dolnej krawędzi elementu #div1 (element z czerwonym kolorem tła). Inaczej mówiąc sprawmy, aby element #div3 był pozycjonowany względem elementu #div1.

Wspomnianą zależność możemy osiągnąć za pomocą wartości właściwości position oraz dodatkowo za pomocą właściwości right oraz bottom.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      #div1 {
        position:relative;
        width:100%;
        height:400px;
        background-color:red;
      }

      #div2 {
        width:80%;
        height:300px;
        background-color:green;
      }

      #div3 {
        position:absolute;
        right:0;
        bottom:0;
        width:60%;
        height:200px;
        background-color:black;
      }
    </style>
  </head>

  <body>

    <div id="div1">
      <div id="div2">
        <div id="div3"></div>
      </div>
    </div>

  </body>
</html>

Rezultat:

Element #div3, który od tej pory jest elementem HTML wyświetlonym w pozycji absolutnej, dzięki temu iż dodaliśmy do niego właściwość position:absolute; został przesunięty do prawej oraz dolnej krawędzi elementu #div1, który od tej pory jest elementem HTML wyświetlonym w pozycji relatywnej, ponieważ posiada on w sobie właściwość position:relative;. Wspomniane przesunięcie do prawej oraz dolnej krawędzi elementu #div1 jest możliwe, dzięki temu że do elementu #div3 została dodana właściwość right:0; oraz właściwość bottom:0;, które mówią przeglądarce internetowej, między innymi że jeżeli dany element HTML jest wyświetlony w pozycji absolutnej to ma zostać on odsunięty o wartość 0 od prawej krawędzi swojego pierwszego napotkanego elementu przodka pozycjonowanego relatywnie oraz ma zostać on odsunięty o wartość 0 od dolnej krawędzi swojego pierwszego napotkanego elementu przodka pozycjonowanego relatywnie.

Pierwszym napotkanym pozycjonowanym relatywnie przodkiem względem pozycjonowanego absolutnie elementu #div3 jest element #div1, dzięki czemu element #div3 został odsunięty o wartość 0 od prawej oraz dolnej krawędzi wspomnianego elementu #div1 za co odpowiada właściwość right:0; oraz właściwość bottom:0;.

Zobaczmy co się stanie z naszym przykładowym układem elementów HTML, gdy do elementu #div2 dodamy właściwość perspective wraz z jakąś przykładową wartością.

#div2 {
  perspective:500px;
  width:80%;
  height:300px;
  background-color:green;
}

Rezultat:

Od tej pory nasz przykładowy element #div3 wyświetlony w pozycji absolutnej jest pozycjonowany względem elementu #div2, a nie względem elementu #div1. Dzieje się tak, ponieważ do zasad, jakie rządzą elementami HTML wyświetlonymi w pozycji absolutnej (absolute) lub w pozycji ustalonej (fixed) została dopisana nowa zasada, która mówi że jeżeli dany element HTML jest wyświetlony w pozycji absolutnej lub w pozycji ustalonej to pozycja takiego elementu HTML w pierwszej kolejności jest liczona względem pierwszego napotkanego elementu przodka, który sprawia że interesujący nas element HTML wyświetlony w pozycji absolutnej lub w pozycji ustalonej znajduje się w zasięgu tej samej perspektywy, w której znalazł się lub którą tworzy dany element przodek.

W naszym przykładzie elementem HTML, który tworzy perspektywę dla pozycjonowanego absolutnie elementu #div3 jest element #div2, ponieważ do wspomnianego elementu #div2 została dodana właściwość perspective wraz z wartością 500px, dlatego wyświetlony w pozycji absolutnej element #div3 jest pozycjonowany względem krawędzi elementu #div2, a nie elementu #div1.

Zobaczmy co się stanie tym razem z naszym przykładowym układem elementów HTML, gdy z elementu #div1 usuniemy właściwość position:relative;, następnie dodamy właściwość transform:perspective(500px); oraz właściwość transform-style:preserve-3d;, a do elementu #div2 dodamy również właściwość transform-style:preserve-3d;.

#div1 {
  transform:perspective(500px);
  transform-style:preserve-3d;
  width:100%;
  height:400px;
  background-color:red;
}

#div2 {
  transform-style:preserve-3d;
  width:80%;
  height:300px;
  background-color:green;
}

Rezultat:

Tym razem w naszym przykładzie elementem HTML, który tworzy perspektywę jest element #div1, jednak wyświetlony w pozycji absolutnej element #div3 jest pozycjonowany względem elementu #div2, a nie względem elementu #div1, ponieważ to element #div2 (dzięki właściwości transform-style:preserve-3d;), sprawia że element #div3 znajduje się w zasięgu tej samej perspektywy, w której znalazł się wspomniany element #div2 (który znalazł się w zasięgu perspektywy tworzonej przez element #div1, dzięki temu że do elementu #div1 została dodana właściwość transform:perspective(500px); oraz właściwość transform-style:preserve-3d;).

W następnej części kursu CSS dowiemy się dlaczego miejsce pozycji początkowej elementu HTML jest ważne w kontekście przekształceń w przestrzeni.