Not able to use Z-index properly

HTML-CSS
#1

Hi,

I have tried to use Z-index as explained in Change the Position of Overlapping Elements with the z-index Property in my code, but not able to.

My code : https://codepen.io/nitishp051843/pen/dyveqLv

I want to bring .head class item to front and send .head:after item to background.

What might be the mistake? I have tried googling and searched through stackoverflow too but not able to solve this.

#2

@nitishp051843

Mate, I am little confused with your statement mentioned here and your actual code. There is no such part as .head:after in your css code.
I am guessing you want your .head class to appear in the top of .head:before element. If that is the case then, you have assigned z-index to be wrong.
z-index takes integer values both +ve and -ve . The larger the value of z-index you give, the more that element has priority to overlap other element.
for example

.div1 {background-color:orange;
z-index:4;
}
.div2 { background-color:red;
z-index:1;
}

As a result the .div1 with appear in the top of .div2 because it has greater z-index than that of .div2.
It doesn’t matter how large the value I provide, I could have provide value of 2 instead of 4 in z-index of .div1 which would still do the same.
I hope, it helped.
Sorry If I misunderstood your question.

#3

Hey !

My bad, it was .head:before. Yes i have given the z-index of .head:before to be 1 while for .head it was 2. so aqua colored square should move to background and circle should come to front right? I’m not getting that result. Thanks for your reply !

#4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.