loading...
Cover image for ๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป How to solve the Z-index issue Within 1 minute๐Ÿ˜ฒ๐Ÿ˜ฒ

๐Ÿ‘จ๐Ÿปโ€๐Ÿ’ป How to solve the Z-index issue Within 1 minute๐Ÿ˜ฒ๐Ÿ˜ฒ

sharmakushal profile image Kushal sharma Updated on ใƒป2 min read

Welcome Developer to my blog post, This post is more beneficial to the frontend developers as this tool work with the frontend stuff, but yes it always helps to have the knowledge about what tools are your front-end developers friend using.

so my dear frontend developer friend, I know that you make the Designs of the awesome website with the help of the HTML and CSS and make them interactive with the help of javascript. but things don't always work as we want.

Alt Text

I am going to share one tool inside the chrome dev tool that you can you while debugging the next issue for the Z-index.

Z-Index:
Alt Text

Z-Index is an important property of CSS. The z-index property specifies the stack order of an element and its descendants. We use Z-index with absolute or relative positions. When elements overlap, z-order determines which one covers the other.

You must have used this one property while making any design and sometimes the Div which you want to show on the top not display whether you give it the Z-Index of 1000000.
Alt Text

Don't keep hit any try with giving the random number. use the following tool to check where your div element is positioned. you must be frustrated while doing this

Alt Text

keep calm and
1) open Chrome Dev tools
2) Click on three dots on the right-hand side and open more tools and select layer
Alt Text
now you get the following screen

Alt Text

There are three options available under the console text,

1) The first mode is pan mode this used to drag the given window inside the layer window

2) The second mode is Rotate mode, you can use this mode to rotate the window and to see how the elements are positioned,

3) and the third one is used to reset the 1st and 2nd settings.

open the devtool if you are reading this post from your laptop or pc and give it a try. you can see how the elements are positioned on any website. there are more two options play with them also

Next week I am going to publish a new post with all the secret tips and tricks for the chrome dev tools. follow me if you want to be notified when it posted.

Thanks for reading โค and if you want to read more stuff like this then follow me, Thanks

To keep up with everything Iโ€™m doing, follow me on Twitter. ==> Kushal Sharma

Posted on by:

sharmakushal profile

Kushal sharma

@sharmakushal

I'm Kushal Sharma from India, I am a Frontend Developer and I like the Javascript and react

Discussion

markdown guide
 

Hey! Nice tip, I knew Chrome had such tool but didn't recall where to find it last time I needed :)

BTW, tips for better future posts:

  • try to be more concise. More than half of the post is welcome, introduction, and stating the obvious... I mean, we came here because we had z-index issues and want to know the tool, there's no need to explain us what z-index issues are haha
  • the text is great but could be awesome with better wording and phrasing. I think you can improve this by reading more professional writings, such as books or professional blogs :)
  • I must confess I don't understand the plea for follows. I'll follow if I resonate with you, won't follow just because of a single post I read. This definitely backfires, at least with me. YouTube is full of this and everyone hates that in the end ๐Ÿคท๐Ÿปโ€โ™‚๏ธ
 

I gave a โค๏ธ and a ๐Ÿฆ„. Cause it deserves both.

 

nice to heard these words

 

Yeah, srsly, developing Angular apps for years, but always struggled with z-indices. :) Thanks, bro.

Welcome bro , i am writing one more next week about new tool for frontend , that will also help you a lot

 

Good tip on the dev tool; but I'm surprised not to see mention of stacking context in the context of fixing CSS z-index issues: creating a new stacking context is the main cause of problems where inordinately large values in z-index will never be a solution.

 

I might be a blind to see, but in that "Layers" where can I find which layer has what z-index?

 

That was really helpful, I'm learning React right now, and was having doubts regarding the z-index while working on the styling of my first project. Thanks for this post ๐ŸŒฟ๐ŸŒฟ

 

Nice to heard that , i am also very amazed when i know this stuff , and it is worth sharing

 
 

I am gradeful to listen that you found this intresting

 

"The z-index property specifies the stack order of an element and its descendants. " ... No, it doesn't. The order of elements in the Dom specifies the order. The z-index in html overrides the the natural order in the Dom. The primary method for getting things to show up should always be to use the natural DOM ordering.

 

MS Edge has a 3D view now which lets you see the z-index visually. That's the best I feel.

 

Thanks for this , I will sure try this also

 

I remember back when Firefox was able to do this natively....

 
 

I was introduced to this feature as Firefox extension called Tilt in year 2002, now a days every browser devlopement tools has it.

For Firefox look for 3D View in Extra Tools
developer.mozilla.org/en-US/docs/T...

 

I remember tilt, but afaik it was removed some years ago...
But good to know that there's an alternative built-in functionality ๐Ÿ™‚

 

In all browsers, using the elements tab will also show you. Just hover over the element in question in the debug area

 

Solving the issue in a simple way helps me a lot.
morpheus tv apk

 

Very helpful, thanks ๐Ÿ™Œ.

 

nice to hear this wordings from the dev community members

 

โ™ฅ๏ธ and ๐Ÿฆ„Because you seem to like Kevin hart

 

Less memes, more exposition, please.

Especially that last Kevin Hart one.

 

Pretty interesting and useful tip, thank you

 
 
 

I found this useful enough that i signed up just to follow you.
Keep up, I have 5 years experience in front-end, and this surprised me!
Thank you

 

Thanks, man, Your words inspired me to share my knowledge more

 

I love how Chrome Dev Tools have absolutely everything!
Thanks for the tip!!

 

I have no idea how the tool is supposed to help me find out the z-index.

 
 

Wow, thanks for the tip! Z-index can often get frustrating to deal with. The 1000000 is so relatable when you want it to just magically work somehow but it still won't, lol.