Stacking Order
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
.
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.
index.html
index.css
index.js
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 thehtml
file.
¿Todo estuvo claro?
Contenido del Curso
Advanced CSS Techniques
1. Introduction
6. Adaptive/responsive websites and apps
Advanced CSS Techniques
Stacking Order
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
.
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.
index.html
index.css
index.js
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 thehtml
file.
¿Todo estuvo claro?