Względne pozycjonowanie elementów

7 lipca 2019

Pozycja względna jak sama nazwa mówi, określa gdzie znajduje się element względem położenia innego elementu. W pierwszej kolejności, aby dobrze zrozumieć to zagadnienie, należy wyobrazić sobie elementy na stronie jako zbiór czworokątów.

Pozycje względną możemy określać przez właściwości CSS takie jak: left, right, top, bottom. Należy pamiętać, że użycie tych właściwości jest możliwe dopiero po zmianie domyślnej wartości position: static

Każdy element na stronie to czworokąt, który może mieć różne wymiary, ale zawsze ma cztery boki oraz cztery rogi. Zobacz przykład poniżej.

Dziecko i rodzic

Jak widzisz na załączonym obrazku, zdarza się, że jeden element jest umieszczony w innym elemencie. Na tym w zasadzie opiera się drzewo DOM w HTML. Jesteśmy w stanie określać pozycje dziecka względem rodzica. Żeby móc to zrobić należy zmienić domyślną wartość position dziecku. Możemy do tego celu użyć wartości relative, która jest najmniej “inwazyjna”. Oznacza to, że nie wpływa drastycznie na zachowanie naszego elementu jak ma to miejsce przy wartości fixed. Jak zapewne wiesz, użycie fixed spowoduje przyklejenie elementu w konkretnym miejscu na stałe.

Dla łatwiejszego zrozumienia przykładu ustalmy strukturę HTML

<section>
  <article>
  </article>
</section>

oraz następujące style CSS

section{
  width: 300px;
  height: 200px;
  border: 3px dashed black;
}
article{
  width: 100px;
  height: 100px;
  border: 3px dashed red;
}

Chcemy sterować pozycją <article> względem pozycji <section>. Jak to zrobić? Ustawiamy <article> właściwość position: relative. Gotowe! Możemy sterować pozycją elementu <article> za pomocą left, right, top, bottom. Pozycje określone (np. w pikselach) będą odnosiły się do lewego, górnego rogu elementu <section>.

Zobacz przykład
https://codepen.io/octocodeio/pen/PrxZPo

Dziecko i przeglądarka

Jeśli chcesz ustalić pozycje dla elementu względem okna przeglądarki, to wystarczy, że użyjesz wartości position: absolute lub position: fixed. Wówczas left, right, top, bottom będą określały pozycje względem okna przeglądarki. Pamiętaj, że pozycja fixed działa w specyficzny sposób. Ustawia nasz element w pozycji stałej względem okna przeglądarki. Element nie jest wówczas wrażliwy na scroll.

Jest jeden przypadek, który spowoduje, że position: absolute nie będzie odnosiło się do lewego, górnego okna przeglądarki, a pozostanie w relacji do rodzica elementu. Taka sytuacja ma miejsce, gdy dziecko ma ustawione position: absolute, a jego rodzic pozycje inną niż static.

Zobacz przykład
https://codepen.io/octocodeio/pen/pXQgPr

Na koniec skrzynia skarbów – newsletter. Znajdziesz w nim link do zapisu na darmowe 45-minutowe konsultacje online. Nie ma go w innym miejscu, tylko w wiadomościach ode mnie. A razem z nim dostaniesz w mailach czyste złoto, czyli wiedzę. Zero spamu.

Zapisz się na newsletter

.

Tu też znajdziesz wiedzę za darmo

Po rozwiązania zajrzyj również na octocode’owy kanał na YouTube’ie. Będzie Twoją latarnią morską w programowaniu.

Lubisz słuchać rozmów z ciekawymi ludźmi z branży? Zapraszam na Prograduchy – podcast na luzie, a jednocześnie merytoryczny. Nie odpłyniesz.

X