---
title: "Why are use z-index in CSS explain with example?"
description: "Why are use z-index in CSS explain with example?"
author: "Ravi Vishwakarma"
published: 2021-07-19
canonical: https://answers.mindstick.com/qa/93783/why-are-use-z-index-in-css-explain-with-example
category: "web application"
tags: ["javascript", "html5", "css cascading style sheets", "web application development"]
reading_time: 6 minutes
---
# Why are use z-index in CSS explain with example?
Why are use z-[index](https://www.mindstick.com/articles/13152/why-google-s-mobile-first-index-makes-total-sense-in-2018) in [CSS](https://www.mindstick.com/forum/514/background-gradient-ie7-css-problem) [explain](https://yourviews.mindstick.com/view/86025/content-created-for-humans-not-for-bots-explain-this-statement) with example?
## Answers
### Answer by user
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky) and flex items (elements that are direct children of display:flex elements).
```
Last div
middle div
first div
```
\
### Answer by Ethan Karla
The z-index property stores any element in the order of the stack. Whichever element has higher stack order is shown first and whichever has a lower stack is shown below the higher element.
**Note:** z-index only works on positioned elements (absolute, relative, fixed, or sticky) and flex items (elements that are direct children of display: flex elements).
Example
```
Last div
middle div
first div
```
\
### Answer by Sanjay Goenka
## What is a Z Index?
Z Index (`z-index`) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index.
**Note**: Z index only works on positioned elements (`position:absolute`, `position:relative`, or `position:fixed`).
#### Possible Values
```css
/* Default value if not specified */
z-index: auto;
/* Integer values */
z-index: 1;
z-index: 100;
z-index: 9999;
z-index: -1;
/* Global values */
z-index: inherit;
z-index: initial;
z-index: unset;
```
## How to use the Z Index
In this example, you can see three boxes displayed on top of each other in different orders using `z-index`.
*HTML*
```html
```
*CSS*
```css
#blue {
background-color: blue;
}
#red {
background-color: red;
}
#green {
background-color: green;
}
```
---
Original Source: https://answers.mindstick.com/qa/93783/why-are-use-z-index-in-css-explain-with-example
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.