--- title: "Z-Index property in CSS3" description: "In this blog I am trying to explain the z-index in CSS3.Z-Index: The z-index sets the stacking level of an element. An element with greater stack orde" author: "Vijay Shukla" published: 2013-01-08 updated: 2014-09-18 canonical: https://www.mindstick.com/blog/424/z-index-property-in-css3 category: "css-css3" tags: ["css-css3"] reading_time: 2 minutes --- # Z-Index property in CSS3 In this blog I [am trying](https://answers.mindstick.com/qa/36834/which-two-programming-languages-should-i-master-in-if-i-am-trying-to-get-into-google-or-facebook) to [explain](https://www.mindstick.com/forum/157854/what-is-system-debugging-explain-some-system-debugging-tools-used-in-modern-computer-systems) the z-index in CSS3. Z-Index: The z-index sets the stacking level of an element. An element with greater stack order is always in front of an element with a lower stack order. It works only on positioned [elements](https://www.mindstick.com/forum/1440/wpf-button-with-multiple-text-elements) these positions are following: 1. Position: [absolute](https://www.mindstick.com/interview/1159/what-is-absolute-and-sliding-expiration-in-dot-net) 2. Position: [relative](https://www.mindstick.com/interview/33881/overview-of-relative-absolute-fixed-and-sticky-positioning-in-css) 3. Position: fixed Z-index has three values these are given below: 1. Auto It is [default](https://www.mindstick.com/interview/12771/what-is-the-importance-of-default-resources) the value of z-index and it is sets the stack order equal to its parents. 2. Number This value is set the stack order of the element. Here is allowed only positive [integer](https://answers.mindstick.com/qa/113667/write-code-for-roman-to-integer) value. 3. Inherit Specify that the z-index should be inherited from the [parent element](https://www.mindstick.com/forum/156679/select-any-parent-element-of-any-tag-via-jquery). ##### Note: Z-index will work when the position [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) is set as well. ##### Html Code: ```    
       

            Mindstick India

   
   
       

            Mindstick U.S.A

   
``` ##### Output: ![Z-Index property in CSS3](https://www.mindstick.com/blogs/7ede9b30-86cd-4fd1-bdde-ecd0137ef82a/images/a7c3e7a0-3998-4544-8a32-1a9d919db986.png) --- Original Source: https://www.mindstick.com/blog/424/z-index-property-in-css3 Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.