in this article we are learning about CSS where what we discuss this time is the problem of stacking objects.
Maybe for those of you who often visit one of the blogs sometimes you find an object that overlaps so it’s not nice to look at. Usually this happens because of the wrong use of the z-index.
Therefore, in this meeting I will discuss more deeply about stacking objects on a blog.
Definition of z-index
is a CSS that functions to manage a stack of objects whether it is set to the top or bottom of the object.
To be clear, this function is almost like a layer in Photoshop that you can set so that an object is above or below.
Usually this z-index can be set using nominal numbers. The higher the number, the higher the layer (object), and vice versa.
Examples of using z-index
So that we all understand better, I will give an example.
z-index : 1
z-index : 2
With the CSS above, box2 will be on the top stack of box1 because its z-index value is greater than box1.
I’ll give another example
z-index : 5
z-index : 1
Now with the CSS above we can mean that box1 is above box2 because the value of box1 is greater than box2.
Note: the point is that the larger the value of the number on the z-index, the more it will rise to the top of another stack, and vice versa.