Summary  
This chapter explains how to use the CSS z-index property to control the stacking order of positioned elements, where higher z-index values bring elements to the front and lower values send them back.  

General domain of usage  
Front-end web development  

The `z-index` property determines the stacking order of positioned elements on a web page. It only applies to positioned elements, which have a position value of `absolute`, `fixed`, `relative`, or `sticky`. As the elements are taken out of the normal document flow, to determine which of these positioned elements should be displayed higher or lower, we specify `z-index`.
```css
z-index: number_without_units
```

The higher value the `z-index` property has, the higher the element is shown on the user screen.

Let's practice. We have four `div` elements with the `box` class, each styled as a square and numbered to represent their order in the `html` document. The squares are currently positioned on top of each other. The task is to adjust the z-index property with the correct values to bring square 3 to the front and send square 4 to the back.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaW5kZXguY3NzIiAvPgogIDwvaGVhZD4KICA8Ym9keT4KICAgIDxkaXYgY2xhc3M9ImNvbnRhaW5lciI+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+MTwvZGl2PgogICAgICA8ZGl2IGNsYXNzPSJib3giPjI8L2Rpdj4KICAgICAgPGRpdiBjbGFzcz0iYm94Ij4zPC9kaXY+CiAgICAgIDxkaXYgY2xhc3M9ImJveCI+NDwvZGl2PgogICAgPC9kaXY+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogV2UgZ2l2ZSBgcG9zaXRpb246IHJlbGF0aXZlYCB0byB0aGUgc3F1YXJlcycgY29tbW9uIGFuY2VzdG9yLiAqLwouY29udGFpbmVyIHsKICB3aWR0aDogMTAwdnc7CiAgaGVpZ2h0OiAxMDB2aDsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KCi8qIFdlIGdpdmUgYHBvc2l0aW9uOiBhYnNvbHV0ZWAgdG8gZWFjaCBzcXVhcmUuICovCi5ib3ggewogIHdpZHRoOiA5MHB4OwogIGhlaWdodDogOTBweDsKICBib3JkZXItcmFkaXVzOiAxMHB4OwoKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CgogIGZvbnQtc2l6ZTogNDRweDsKICBjb2xvcjogYWxpY2VibHVlOwogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKfQoKLyogV2Ugc2V0IGRpZmZlcmVudCBgei1pbmRleGAgdmFsdWVzIHRvIGVhY2ggYm94IGFuZCBzcGVjaWZ5IHRoZWlyIHBvc2l0aW9uLiAqLwouYm94Om50aC1jaGlsZCgxKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2U0M2Q0MDsKICB0b3A6IDkwcHg7CiAgbGVmdDogMjBweDsKICB6LWluZGV4OiAyOyAvKiBTcXVhcmUgMSBpcyBzZXQgdG8gbGF5ZXIgMiAqLwp9CgouYm94Om50aC1jaGlsZCgyKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogIzk0Yzk3MzsKICB0b3A6IDIwcHg7CiAgbGVmdDogMTBweDsKICB6LWluZGV4OiAzOyAvKiBTcXVhcmUgMiBpcyBzZXQgdG8gbGF5ZXIgMyAqLwp9CgouYm94Om50aC1jaGlsZCgzKSB7CiAgYmFja2dyb3VuZC1jb2xvcjogI2ZhYmVjMDsKICB0b3A6IDEwcHg7CiAgbGVmdDogODBweDsKICB6LWluZGV4OiA0OyAvKiBTcXVhcmUgMyBpcyBzZXQgdG8gbGF5ZXIgNCAtIHRoZSBoaWdoZXN0ICovCn0KCi5ib3g6bnRoLWNoaWxkKDQpIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDU3ZGNkOwogIHRvcDogOTBweDsKICBsZWZ0OiA5MHB4OwogIHotaW5kZXg6IDE7IC8qIFNxdWFyZSA0IGlzIHNldCB0byBsYXllciAxIC0gdGhlIGxvd2VzdCAqLwp9

>Note
>
>If we set the same value for the `z-index` property to different elements, the browser will show the elements in the order in which the elements are in the `html` file.

What is the purpose of the `z-index` property?

Migliora le tue competenze di styling padroneggiando tecniche CSS avanzate per il web design moderno. Posiziona e gestisci gli elementi con precisione utilizzando strategie di posizionamento avanzate. Crea transizioni fluide e animazioni coinvolgenti per migliorare l'esperienza utente. Trasforma e manipola gli elementi per effetti visivi dinamici. Realizza design responsivi che si adattano a diversi dispositivi e ottimizza il flusso di lavoro con preprocessori CSS come Sass.

Scopri cosa possono aspettarsi gli studenti da questo corso avanzato di HTML e CSS. Quali conoscenze sono necessarie prima di iniziare il corso? Quali argomenti verranno trattati?

Posizionamento e gestione degli elementi nelle pagine web. Approfondimento delle diverse proprietà di posizionamento, utilizzo dell'ordine di sovrapposizione per controllare la visibilità degli elementi sovrapposti e gestione dell'overflow dei contenuti.

Esplora il potenziale delle transizioni e apprendi come migliorare l'esperienza utente. Scopri come animare le proprietà in modo fluido e graduale, creando transizioni di stato senza soluzione di continuità.

Scopri la proprietà animation e come può essere utilizzata per creare design dinamici e coinvolgenti. Approfondisci la creazione di animazioni complesse utilizzando i keyframe e il controllo dell'animazione.

Esplora la proprietà di trasformazione, che consente di modificare l'aspetto e la posizione degli elementi in una pagina web. Scopri come ridimensionare, ruotare, inclinare e traslare elementi in due e tre dimensioni. Combina più trasformazioni per creare effetti più complessi.

I principi e le tecniche utilizzate nel design adattivo/responsive mirano a rendere siti web e applicazioni accessibili e visivamente attraenti su diversi dispositivi, dimensioni dello schermo e orientamenti.

Scopri i preprocessori in CSS e come possono aiutare a scrivere codice più efficiente e manutenibile. Comprendi come utilizzare i preprocessori per semplificare il flusso di lavoro e generare codice CSS più pulito.

Managing the Stacking Order of Elements