CSS: z-index, czyli moje na wierzchu

września 18, 2015
Z pewnością podczas przeglądania skinu bloga nie raz i nie dwa zastanawialiście się, co kryje się pod właściwością o tajemniczo brzmiącej nazwie z-index. Cóż to może być za twór?

z-index - co to jest?

CSS operuje w trzech wymiarach - wysokości (height), szerokości (width) oraz głębokości. Głębokość określa, w jakiej kolejności mają przesłaniać się nawzajem dane elementy HTML. Głębokość wyrażana jest za pomocą właściwości o nazwie z-index i przeznaczona dla elementów HTML, które nie są elementami wyświetlonymi w domyślnej, statycznej pozycji (position: static) Innymi słowy, właściwość z-index dotyczy takich elementów HTML, które posiadają w sobie wartość właściwości position różną od static.

Litera "z" oznacza głębokość, zaś "index" to po prostu liczba czyniąca dane elementy warstwami na stronie. Zatem właściwość z-index określa kolejność nakładających się na siebie elementów HTML. Elementy z wyższym numerem nakładają się na elementy z niższym numerem.

Dla przykładu:
Obiekt o wartości z-index: 9 będzie się nakładał na obiekt o wartości z-index: 1. Jeżeli więc nadamy obiektowi, powiedzmy, wartość z-index: 99999 i do tego jeszcze position: fixed, to otrzymamy w rezultacie obiekt poruszający się wraz ze stroną i nakładający na wszystkie inne obiekty tej strony. Może się to okazać przydatne np. gdy chcemy stworzyć menu górne nad nagłówkiem poruszające się wraz ze stroną.

Więcej informacji na ten temat znajdziecie m. in. w poradach HTML oraz poradach CSS.

z-index: 999;

z-index: 999;


Przypisywanie obiektom warstw jest niezwykle proste i daje wiele różnych możliwości. Można np. sprawić, aby obrazki widniały na tekście lub pod tekstem lub aby przyciski społecznościowe były nałożone na tekst bądź też znajdowały się pod tekstem.

W niektórych szablonach pobranych z zewnątrz zdarza się tak, iż pewne elementy nakładają się na widżet cookies. Wówczas wystarczy wejść w tryb edycji kodu HTML i zmienić właściwość z-index na niższą od tegoż widżetu cookies.

Właściwość z-index pozwala urozmaicić wygląd bloga oraz, co najważniejsze, określić które elementy HTML mają być nałożone na inne i widoczne w pierwszej kolejności.
2013 © Introwertyczka w sieci. Obsługiwane przez usługę Blogger.