πŸ‘¨πŸ»β€πŸ’» How to solve the Z-index issue Within 1 minute😲😲

πŸ‘¨πŸ»β€πŸ’» How to solve the Z-index issue Within 1 minute😲😲

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, the First mode is pan mode this used to drag the given window inside the layer window, the second mode is Rotate mode, you can use this mode to rotate the window and to see how the elements are positioned, 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

Alt Text

Leave a Reply

Your email address will not be published.