👻 Check our latest review to choose the best laptop for Machine Learning engineers and Deep learning tasks!
When designing your layout with CSS, you often place elements up / down or left / right. The z-index
allows elements to be moved to a third dimension on the Z axis, with an overlapping effect (one on top of the other).
z -index
accepts the keyword auto
or an integer. These are all valid statements:
Note : to apply the z-index, you must also position the elements, using the Position
property relative, absolute or fixed. If no position is specified it will be like the application z-index: auto
and no stack context will be applied
With that in mind, let’s take a look as an example. .
Let some guinea pigs
You can check this example at Codepen . Play with him and the program with me!
We are going to place two guinea pigs, or Cuys ( which sounds much nicer). Imagine it is summer, it is over 90 degrees outside. Cuy # 1 will be placed inside a lake, will have fun. Cuy # 2 is very lazy so we have to give him some coffee to wake him up! Next, we’re going to stack our Cuy # 2 with the coffee so it can drink.
Without positioning or CSS our images look something like this:.
the idea is to create an overlay context using z-index, then place images above the lake and a cafe.