DEV Community

Cover image for 👨🏻‍💻 How to solve the Z-index issue Within 1 minute😲😲

👨🏻‍💻 How to solve the Z-index issue Within 1 minute😲😲

Kushal sharma on May 02, 2020

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 al...
Collapse
 
igorsantos07 profile image
Igor Santos

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 🤷🏻‍♂️
Collapse
 
royaljerry profile image
Royaljerry • Edited

I gave a ❤️ and a 🦄. Cause it deserves both.

Collapse
 
sharmakushal profile image
Kushal sharma

nice to heard these words

Collapse
 
royaljerry profile image
Royaljerry

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

Thread Thread
 
sharmakushal profile image
Kushal sharma

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

Collapse
 
bodnarlajostibor profile image
Lajos

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

Collapse
 
blindfish3 profile image
Ben Calder

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.

Collapse
 
totallymustafa profile image
Syed Ahmad Mustafa

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 🌿🌿

Collapse
 
sharmakushal profile image
Kushal sharma • Edited

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

Collapse
 
aravindballa profile image
Aravind Balla

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

Collapse
 
sharmakushal profile image
Kushal sharma

Thanks for this , I will sure try this also

Collapse
 
belevatini profile image
Rocky Bronzino

"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.

Collapse
 
zqfcoder profile image
zqfcoder

thank for your sharing

Collapse
 
sharmakushal profile image
Kushal sharma

I am gradeful to listen that you found this intresting

Collapse
 
petr7555 profile image
Petr Janik

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

Collapse
 
kopseng profile image
Carl-Erik Kopseng • Edited

Ditto. I assume that by tilting/rotating the layers, you should see the stacking somehow. This does not happen in my case. There is a single layer showing, no matter how 3D it gets.

Collapse
 
kolaente profile image
kolaente • Edited

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

Collapse
 
natterstefan profile image
Stefan Natter 🇦🇹👨🏻‍💻

Thank you!

Collapse
 
bassimsmile profile image
Bassim RAJI

Pretty interesting and useful tip, thank you

Collapse
 
sharmakushal profile image
Kushal sharma

Thanks buddy

Collapse
 
mmotamimi profile image
Mohammad Tamimi • Edited

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

Collapse
 
sharmakushal profile image
Kushal sharma

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

Collapse
 
gabiduarte profile image
Gabrielle Duarte

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

Collapse
 
miguelthedev profile image
Miguel Sanchez

Very helpful, thanks 🙌.

Collapse
 
sharmakushal profile image
Kushal sharma

nice to hear this wordings from the dev community members

Collapse
 
ididnt_getalong profile image
Sudharshaun Mugundan

♥️ and 🦄Because you seem to like Kevin hart

Collapse
 
pauljherring profile image
PJH

Less memes, more exposition, please.

Especially that last Kevin Hart one.

Collapse
 
inozex profile image
Tiago Marques

Any Firefox alternatives?

Collapse
 
sangram profile image
Sangram

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...

Collapse
 
inozex profile image
Tiago Marques

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

Collapse
 
graemeq profile image
Graeme Q

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

Collapse
 
nish7x profile image
Nishant Vora

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.

Collapse
 
sharmakushal profile image
Kushal sharma

Thanks bro

Collapse
 
rolandixor profile image
Roland Taylor

This is a great tip!