position: static; – z-index

View Github Repository Open presentation in a new window

beatadelura

See all presentation from beatadelura

position: static; – z-index

0 0

workshop03

On Github beatadelura / workshop03

Pozycjonowanie

Position

  • static
  • fixed
  • relative
  • absolute

position: static;

Jest to pozycjonowanie statycznie, domyślne. Nie możemy zmienić jego ustawienia za pomocą właściwości top, bottom, right, left

position: fixed;

Element będzie ustawiony w jednym miejscu i nie będzie zmieniał swojej pozycji nawet podczas scrollowania strony. Pozycje elementu możemy ustawić za pomocą top, bottom, right, left. Pozycja elementu będzie liczona względem okna przeglądarki. Przestrzeń w jakiej element znajdował się gdy miał ustawiony position: static; zostanie usunięta.

position: relative;

Po przesunięciu elementu pozostanie po nim pusta przestrzeń. Pozycje elementu możemy ustawić za pomocą top, bottom, right, left. Pozycja elementu HTML będzie liczona względem jego pozycji początkowej.

position: absolute;

Przestrzeń w jakiej element znajdował się gdy miał ustawiony position: static; zostanie usunięta. Pozycje elementu możemy ustawić za pomocą top, bottom, right, left. Pozycja elementu HTML będzie liczona względem krawędzi okna przeglądarki internetowej lub od pierwszego elementu przodka z właściwością position:relative; lub position:absolute; lub position:fixed;

z-index

Właściwość określa kolejność wyświetlania warstw elementów. Element z wyższą wartością będzie widoczny z przodu elementu z niższą wartością. z-index działa tylko z elementami pozycjonowanymi absolute, relative, fixed
Pozycjonowanie