CSS – position, overflow i z-index

Loading Likes...

Dzisiaj poruszymy temat niezwykle ważny, który może być nieco skomplikowany dla młodego web deva. Warto dokładnie zrozumieć temat, wtedy nie ma żadnych wątpliwości, co do stosowania tego stylu. Na samym końcu dołączę plik z przykładami. Jak zwykle mały spis treści:

  1. Static
  2. Fixed
  3. Relative
  4. Absolute
  5. Z-index
  6. Overflow-x i overflow-y

Miłej lektury! 😉

 Position static

Position fixed

pozycja, która nigdy się nie zmienia. Mimo scrollowania strony, element wciąż pozostaje w jednym miejscu. Ta pozycja przyjmować może dodatkowe style: top, right, bottom, left. Wtedy oprócz position fixed deklarujemy także np.
position: fixed;
top: 20px;
left: 100px;
Element odsunie się od góry o 20px i od lewej krawędzi o 100px. Możemy tutaj używać różnych jednostek, jak i %. Często nawigacja jest stylowana tym stylem w stronach typu onepage (cała treść na jednej stronie – bez podstron), aby zawsze było ją widać i aby użytkownik mógł swobodnie poruszać się miedzy konkretnymi elementami menu. Ważne jest także, że ten styl nie zostawia luki tzn. elementy nie mogą go przesyć wraz z domyślnym flow strony.

Position relative

Position absolute

najtrudniejszy do zrozumienia styl, ale spokojnie poradzimy sobie. 🙂 Chodzi głównie o zagnieżdżenia (umieszczanie elementu w elemencie). Jeżeli jakiś element znajduje się w kontenerze ustawionym na relative(lub fixed), a wewnątrz jest element zadeklarowany absolutnie, wtedy ten element w środku (absolute) pozycjonuje się względem rodzica (relative lub fixed – w zależności jak ustawiliśmy rodzica). Należy zwrócić uwagę, że jeżeli element pozyowany absolutnie znajduje się w body, to ustawiany jest względem rodzica – właśnie względem body.

Z-index 

Overflow-x

Pobaw się position tworząc własny projekt. Np.
Stwórz 2 divy – nadaj im position absolute. Nadaj im kolory tła dla lepszego rozróżnienia. Następnie dodaj jednemu z nich (temu niewidocznemu) z-index na jakąś dodatnią wartość.
Dodaj kolejny div i nadaj mu pozycję relatywną, a następnie w środku utwórz diva z pozycją absolutną i nadaj wartości top:25px i left 50px. (Pamiętaj, aby każdemu divowi i najlepiej też body nadawać wysokość (height) i szerokość (width). Możesz, w którymś divie powyżej dodać paragraf (p) i wypełnić jakimś tekstem. Ustawiaj im różne wartości overflow-x lub overflow-y, biorąc pod uwagę szerokość i wysokość danego elementu.

Przykład praktyczny 🙂

Czerp satysfakcję z kolejnych umiejętności CSS na twoim koncie. Jeśli wciąż mylisz niektóre wartości, to nie martw się – utrwalisz to sobie tylko wtedy, gdy będziesz tego używał w swoich projektach.

Roma non uno die aedificata est

Co z łaciny tłumaczymy: “Nie od razu Rzym zbudowano.” 😉
Powodzenia i do zobaczenia w kolejnym wpisie!

You May Also Like

About the Author: Sebastian Mieszczańczyk

Studia: Wyższa Szkoła Ekonomii i Informatyki w Krakowie Profil: "Informatyka i Ekonometria" Specjalizacja: "Programowanie urządzeń mobilnych i aplikacji sieciowych" Hobby:
  • Programowanie: Typowy front: HTML/JS/CSS Do tego: Vue/Vuex/Nuxt/Angular/
  • Rozwój osobisty
  • siatkówka (GeoVolley Team) na pozycji środkowego
  • Filmy - od dawna pasjonuję się nie tylko oglądaniem filmów, ale także analizowaniem ich pod kątem stworzenia ( Mój link do filmweba) - w liceum dzięki profilowi z modułem filmowym mogłem bardziej wejść w szczegóły kadrów, ujęć itd.
  • Psychologia - niestety wciąż mam zbyt mało czasu na zagłębianie się w tą wiedzę :(

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Facebook
Inline
Inline