Remote developer with 20+ years of experience. Mostly worked with PHP and with a passion for REST APIs and front-end interfaces, UX and DX - consequentially working also with React and Svelte.
Location
Rio de Janeiro, Brazil
Education
Universidade Estácio de Sá / Dalhousie University
Work
Remote full-stack developer @ eHungry; past Toptal freelancer
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 🤷🏻♂️
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.
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 🌿🌿
"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.
Grumpy old fart that throws up a little every time he sees someone being passionate about some javascript lib. Tech agnostic. If it bleeds, I can kill -9 it.
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.
Frontend Engineer, Coffee Glutton, Quality Lover ▫◽◻⬜◻◽▫ My name is Tiago Marques and I am curious. I try to learn more about everything, and seek solutions to the problems around me.
Frontend Engineer, Coffee Glutton, Quality Lover ▫◽◻⬜◻◽▫ My name is Tiago Marques and I am curious. I try to learn more about everything, and seek solutions to the problems around me.
I am interested in and talking about JavaScript, ReactJS, NodeJS, CSS, and Software Engineering | 📧 Weekly NL Series: https://newsletter.natterstefan.me
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.
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:
I might be a blind to see, but in that "Layers" where can I find which layer has what z-index?
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 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
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
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
"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.
thank for your sharing
I am gradeful to listen that you found this intresting
I have no idea how the tool is supposed to help me find out the z-index.
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.
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
Any Firefox alternatives?
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
I remember back when Firefox was able to do this natively....
Thank you!
Pretty interesting and useful tip, thank you
Thanks buddy
I love how Chrome Dev Tools have absolutely everything!
Thanks for the tip!!
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.
This is a great tip!
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.
Thanks bro