How z-index works in CSS ? Last Updated : 17 Mar, 2021 Comments Improve Suggest changes Like Article Like Report In this article we are going to see how z-index works in CSS. Z-index works as a stack for the elements that are visible on the screen. We can assign number to z-index property to assign it a position in stack. Assigned number can be negative. Greater number assigns front position and lesser number assigns behind position. Consider example that an img tag has z-index as 1 and another h1 tag has z-index as 2. So tag with z-index equal to 2 will appear before z-index equal to 1, i.e. h1 tag content will appear stacked on img tag. Default z-index is 0 for all elements. Syntax: z-index: number; Approach: In this example we will use an image tag and header tag to stack on each other. We will assign z-index to image tag. Example 1: In below code we try to stack h1 header on image by assigning image tag a z-index of -1. HTML <!DOCTYPE html> <html lang="en"> <head> <style> #image1{ height: 100px; width: 100px; z-index: -1; position: absolute; } </style> </head> <body> <h1>z-index property in css</h1> <div id="image1"></div> <img id="image1" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210316171438/Screenshot-2021-03-16-171322.png" alt=""> <p>Geeks for Geeks is the best website for CS.</p> </body> </html> Output: Example 2: In below code we try to stack image on h1 header by assigning image tag a z-index of 1. HTML <!DOCTYPE html> <html lang="en"> <style> #image1{ height: 100px; width: 100px; z-index: 1; position: absolute; } </style> <body> <h1>z-index property in css</h1> <div id="image1"></div> <img id="image1" src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210316171438/Screenshot-2021-03-16-171322.png" alt=""> <p>Geeks for Geeks is the best website for CS.</p> </body> </html> Output: Comment More infoAdvertise with us Next Article How z-index works in CSS ? devangj9689 Follow Improve Article Tags : Web Technologies CSS CSS-Properties CSS-Questions Similar Reads How does z-index layer work ? In this article, we will see how z-index works in CSS. As we all know that we take the help of dimension to look at every item, which determines the size of an object completely. So z-index is used to make render the element along the z-axis. The default value of the z-index is zero. Example: Let's 2 min read How does CSS work under the hood ? Cascading Style Sheets referred to as CSS, is a stylesheet language used to design and describe the presentation of the webpage to make it attractive. The main use of CSS is to simplify the process of making web pages presentable. The way elements should be rendered on screen is described by CSS. CS 3 min read Tailwind CSS Z-index The tailwind CSS is a utility CSS framework that provides classes the manage our HTML content in the use of CSS. The tailwind CSS makes our designing part easier and responsive for multiple platforms. The z-Index utility is for controlling the stack order of an element. It is the alternative to the 3 min read How CSS Positioning and Flexbox Work? CSS positioning and Flexbox are fundamental tools for web layout and design. Understanding how they work can help you create more responsive and well-structured web pages. CSS positioning allows you to control the placement of elements on the web page. There are several positioning schemes in CSS. T 5 min read What is mouse down selector in CSS ? In this article, we are going to learn about the mouse-down selector in CSS. The mouse-down selector means the method to detect whether the primary mouse button is clicked or not. In CSS, the function of the mouse-down selector is done by the active pseudo-class. We can add this pseudo-class to the 2 min read Like