Pozycjonowanie to ważna umiejętność w repertuarze osoby piszącej css-a, jest to czasem jedyne rozwiązanie, aby poprawić denerwujące nas zachowanie np. przeglądarki.

Pozycjonowanie rodzaje i podstawy

Pozycjonowanie określa relacje, między elementami, a także mówi czy element powinien znajdować się we flow dokumentu, czy też nie. Dlatego zobaczmy podstawowe wartości własność position.

static: Jest to wartość domyślna, która pozostawia element w jego normalnym miejscu w układzie strony.

relative: Pozycjonuje element względem jego normalnego miejsca, ale umożliwia przesuwanie go za pomocą właściwości top, right, bottom i left.

absolute: Pozycjonuje element względem jego najbliższego pozycjonowanego przodka, ignorując inne elementy na stronie.

fixed: Pozycjonuje element względem okna przeglądarki, co oznacza, że ​​pozostanie na stałej pozycji nawet podczas przewijania strony.

position: sticky to stosunkowo nowa właściwość CSS, która pozwala elementowi zachować się jak position: relative do momentu, gdy nie jest przewijany poza określony obszar na stronie, a następnie zachowuje się jak position: fixed. Jest to bardzo przydatne narzędzie do tworzenia chociażby nagłówków takich jak w wersji mobilnej tej strony.

Szerzej o tych wartościach będzie w kolejnych akapitach artykułu.

relative vs absolute

Pozycjonowanie relative jest najpopularniejszym rozwiązaniem, ponieważ pozwala na lekkie korekty pozycji względem wyjściowej pozycji elementu. Natomiast pozycjonowanie typu absolute jest częściej używane w przypadkach kiedy elementy mają nachodzić na siebie, czy byś w ustalonym miejscu względem dokumentu. Position relative, jak wcześniej napisałem pozycjonuje się w obec swojej wyjściowej pozycji, pozostając we flow dokumentu. A absolute wyrzuca element z flow dokumentu (czyli jeśli umieścił być diva w miejscu bazowym elementu position absolute, to również wyświetlił by się w jego miejsu ignorując element z pozycjonowaniem absolute), i pozycjonuje się względem najbliżeszgo rodzica z nie domyślnym pozycjonowaniem(nie static).
Ale jak możemy pozycjonować? Zarówno w absolute i relative mamy własność top, bottom, left, rigth, lecz działają one nieco inaczej. W position absolute, wartości te określają odległość od elementu względem, którego pozycjonujemy, a w relative określamy o ile w daną stronę ma odsunąć się element względem pozycji wyjściowej.
Tak wygląda pozycjonowanie elementu w CSS.

.element-absolute{
  position: absolute;
  top: 20px; /*będzie znajdował się 20px od góry od elementu względem którego pozycjonujemy */
  left: 10px;
}
.element-relative{
  position: relative;
  top: 20px; /*będzie znajdował się 20px w dół od swojej pozycji początkowej */
  left: 10px;
}

fixed vs sticky

Pozycjonowanie fixed umieszcza element w określonym miejscu na stronie, podobnie jak postion absolute.Pozycja elementu jest określana względem okna przeglądarki lub najbliższego rodzica. Element zostaje usunięty z flow dokumentu, co oznacza, że ​​inne elementy nie będą się wokół niego układać. To pozycjonowanie często jest używane do elementów, które mają być widoczne cały czas na ekranie, np. pasków nawigacyjnych i przycisków czatu.

Position sticky umożliwia przyklejenie elementu do określonego miejsca na stronie, aż do momentu, gdy zostanie osiągnięta inna pozycja (najczęściej jest to góra ekranu, lub koniec wysokości/szerokości elementu). Pozycja jest określana względem jego najbliższego rodzica z nie domyślnym pozycjonowaniem (nie static) lub względem okna przeglądarki (jeśli rodzic nie ma scrollowania). Element pozostaje częściowo w flow dokumentu, co oznacza, że ​​inne elementy mogą się wokół niego układać, dopóki nie zostanie "przyklejony" (osiągnie daną pozycje i na niej zostanie). Często używane do elementów, które powinny być widoczne podczas scrollowania określonego obszaru, np. boczne menu na stronach z dużą ilością treści. Atrybutem częśto łączącym się z position sticky jest z-index, mówiący o tym co ma pierwszeństwo w wyświetlaniu się na stronie. Im wyższy z-index tym wyżej wyświetlony będzie element w przypadku nakładania się.

.nawigacja {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;/*często używane pozycjonowanie, aby element pozostał na górze strony,*/
  }
  .menu {
    position: sticky;
    top: 50px; /* Początkowa odległość od góry*/
    left: 0;
  }

Inherit i static

Te pozycjonowania są najprostsze do zrozumienia, inherit oznacza, odziedziczyć pozycjonowanie po rodzicu (sama wartość relative,absolute,fixed,itp.). A position static to domyślne ustawione pozycjonowanie, umieszcza element we flow dokumentu i umieszcza je w kolejności określonej przez właściwość display:
W tym artykule dowiedziałeś się najważniejszych rzeczy o pozycjonowaniu w css