Pozycja, która jest defaultowa (domyślna) w przeglądarce. Tak jak HTML jest czytany (od góry do dołu), tak ustawiane są elementy. Możemy spotkać się ze stwierdzeniem – elementy ustawiają się normalnie co do flow strony. Czyli warto pamiętać 2 sprawy: domyślny + jeden pod drugim.

element ustawia się relatywnie. Chociaż ta nazwa nie jest dla nas instynktowna, oznacza, że element ustawia się względem normalnej pozycji. Z tego powodu działają tutaj także deklaracje top, right, bottom, left. Analogicznie jak z position: fixed. Najpierw deklarujemy position relative, a poniżej elementy, które nas interesują (top, right, bottom, left). Ten styl pozostawia luki, jednak elementy nie będą korygowane, aby w te luki się zmieścić.

wszystkie elementy, które są pozycjonowane inaczej niż zgodnie z flow strony (position: static – jeden pod drugim), mogą nachodzić na siebie. Ten styl pozwala nam ustalić, który powinien być bliżej użytkownika (który powinien być wyżej, powinien być widoczny). Z-index przyjmuje wartości liczbowe – im wyższa liczba, tym element jest wyciągany wyżej tzn. jest widoczny. Styl przyjmuje także ujemne wartości. Nazwa mówi sama za siebie – pozycjonujemy element względem osi Z (w perspektywie 3D, gdzie X to oś pozioma, Y to oś pionowa, a Z to ta ostatnia oś w tym modelu).

odnosi się do suwaków. Jeśli nasza zawartość jest na tyle duża, że nie mieści się w jakimś elemencie np. na naszym ekranie, wtedy pojawiają się domyślnie suwaki. Overflow-x odnosi się do suwaków poziomych – względem osi x, natomiast overflow-y odnosi się do pionowych suwaków – względem osi y. Style te przyjmują takie wartości:

• visible – wartość domyślna. Jeśli zawartość nie mieści się w elemencie, to wtedy ta zawartość wychodzi poza element i jest widoczna. Suwak dodawany jest tylko wtedy, kiedy jakiś element nie mieści się na ekranie.
• hidden – suwak jest ukrywany – powoduje to, że zawartość, która nie mieści się w danym elemencie jest obcinana tzn. nie widać jej. Odnosi się to również do ekranu – jeśli coś się na nim nie mieści, to po prostu nie jest możliwe wyświetlenie tej treści.
• scroll – wartość dodaje oba suwaki, bez względu na to czy zawartość mieści się w elemencie czy też nie. Jeśli zawartość się mieści w elemencie – widoczny jest pasek suwaka, ale sam suwak nie jest widoczny.
• auto – wartość dodaje suwak kiedy jest to konieczne tzn. jeśli treść wychodzi poza ekran lub inny element, wtedy dodawany jest suwak. W sytuacji, kiedy zawartość mieści się w elemencie lub na ekranie – wtedy suwak nie jest dodawany, a treść wyświetlana jest prawidłowo.Między tymi elementami są małe różnice, ale jakże ważne. Warto samemu przetestować każdą z wartości i zobaczyć jakie daje efekty. Niżej zamieszczam plik html ze stylami umieszczi w sekcji head. Pamiętaj, że możesz go zapisać na komputerze klikając prawym i zapisz jako. Nie zapomnij ustawić rozszerzenia pliku na html. 😉