Z-index

z-index jest właściwością CSS pozwalającą na określenie pozycji elementu względem innych elementów w dokumencie. Domyślnie elementy są ułożone na stronie jeden na drugim, w kolejności, w jakiej są zdefiniowane w kodzie HTML.

Jeśli kilka elementów znajduje się na tej samej pozycji na stronie, element z wyższym z-index zostanie wyświetlony na wierzchu. Właściwość z-index przyjmuje wartość liczbową, a element o większej wartości będzie wyświetlany na wierzchu elementu o mniejszej wartości.

Html

												
<div id="background">

  <img src="Coffee.png">

  <p class="content">Kawa</p>

</div>


												
										

Css

												
#background {
  position: absolute;
  z-index: -1;
}

#content {
  position: relative;
  z-index: 1;
}
												
										

Uruchom kod

Kawa

Notatka

Z-index działa tylko dla elementów, które mają ustawioną wartość position na relative , absolute lub fixed