Z-Index Explained: How to Stack Elements Using CSS

  • Whatsapp
Z-Index Explained: How to Stack Elements Using CSS

 

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.

#box1 {
z-index : 1
}

#box2 {
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

#box1 {
z-index : 5
}

#box2 {
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.

Okay, that’s all about learning CSS this time, I hope you can continue to follow lessons about CSS, HTML and Javascript on this blog.

Related posts