3 najczęściej stosowane sposoby pozycjonowania elementów w CSS-ie. Czy używałeś je poprawnie?

Bez CSS-a w zasadzie jak bez ręki, przynajmniej w kwestii budowania stron internetowych. Każda witryna, jaką odwiedzamy (mniejsza czy większa, ale jakakolwiek), w jakimś stopniu musi mieć zadeklarowane jakieś kolory, marginesy, odstępy, co robi się właśnie za pomocą kaskadowego arkusza stylów. O ile rozumiemy zasady jego działania, jest to wspaniałe narzędzie do wzbogacania naszej strony. Czasem jednak niewiedza prowadzi do takich sytuacji jak na zdjęciu poniżej... ;)

Dlatego dziś pragnę się zająć jednymi z wielu ważnych parametrów, którymi być może będziecie operować przy budowie swojej witryny. Chodzi mianowicie o właściwość position, w ramach której używa się w zasadzie trzech typów: absolute, relative i fixed. Czym się one różnią i jak je stosować?

Załóżmy, że mamy prostą stronę z równie prostym stylem. Kod HTML wygląda następująco:

<div class=”parent”>
 <div class=”box” id=”one”>One</div>
 <div class=”box” id=”two”>Two</div>
 <div class=”box” id=”three”>Three</div>
 <div class=”box” id=”four”>Four</div>
</div>

Kod CSS z kolei przedstawia się tak:

.parent {
 border: 2px black dotted;
 display: inline-block;
}
.box {
 display: inline-block;
 background: red;
 width: 100px;
 height: 100px;
}
#two {
  background: green;
}

Stan początkowy, który będziemy dostosowywać pod konkretne przykłady, wygląda tak:

Position: absolute

Pierwszy z dzisiejszych typów, absolute, pozwala nam na pozycjonowanie danego elementu względem jego najbliższego rodzica, a jeżeli takowego nie ma, względem okna przeglądarki. Element ustawiony jako absolute jest wyłączany z normalnego generowania strony — oznacza to, że nie ma on wpływu na pozycję innych rzeczy, które umieścimy na stronie, jest generowany ponad nimi (coś jak warstwa w GIMP-ie czy Photoshopie).

Zmodyfikujmy zatem CSS-a w zakresie zielonego kwadratu tak, aby był on absolute:

#two {
  top: 20px;
  left: 20px;
  background: green;
  position: absolute;
}

Efekt:

Co zrobiliśmy? Zgodnie z wcześniejszym opisem, pomimo iż w HTML-u zielony kwadrat znajduje się obok pierwszego czerwonego kwadratu, parametr absolute sprawia, że ten kwadrat nie jest już generowany razem z resztą elementów, ale ponad nimi. Znajduje się on 20 pikseli od góry i 20 pikseli od lewej strony diva klasy parent (bo kwadrat pozycjonujemy względem najbliższego rodzica).

Position: relative

Opcja relative różni się od opcji absolute przede wszystkim tym, że w przypadku użycia opcji relative element pozostaje na swoim miejscu — jest generowany tak, jak był pierwotnie umieszczony w HTML-u (czyli nie generuje się on ponad innymi elementami, co było cechą opcji absolute). Można go jednak przesuwać względem jego oryginalnego położenia tak samo, jak przesuwaliśmy go w przypadku opcji absolute. Nie psujemy przy tym układu elementów, które znajdują się obok niego.

W kodzie zmieniamy zatem absolute na relative:

#two {
  top: 20px;
  left: 20px;
  background: green;
  position: relative;
}

Dało to następujący efekt:

Element jest przesunięty o 20 pikseli od góry i 20 pikseli od lewej strony swojego oryginalnego położenia.

Position: fixed

Opcja fixed jest dość podobna do opcji absolute. Podobna nie oznacza jednak taka sama - inaczej zapewne nie byłaby fixed :) Różnica polega na tym, że element z atrybutem position: fixed jest ustawiany zawsze względem okna przeglądarki. Będzie on zawsze widoczny, nawet gdy będziemy przewijać stronę, co jest wygodne w przypadku na przykład nawigacji po witrynie albo obecnego na wielu stronach przycisku powrotu do góry.

Zmieniamy zatem relative na fixed:

#two {
  top: 20px;
  left: 20px;
  background: green;
  position: fixed;
}

Efekt:

Gdy nie przewijamy strony, efekt jest taki sam jak w przypadku opcji absolute. Przewijanie strony sprawia jednak, że wraz z nią przesuwa się także element, który uznaliśmy jako fixed.

Jak zatem widać, pozycjonowanie elementów względem siebie nie jest specjalnie trudne. Między poszczególnymi parametrami występują jednak pewne subtelne różnice, które warto znać, aby nasze layouty były przemyślane i spójne. Oczywiście nie oznacza to, że na każdej stronie takie pozycjonowanie będzie konieczne, aczkolwiek warto sprawdzić, czy u Was takie rzeczy się przypadkiem też nie przydadzą :)