css

In this tutorial, we will talk in detail about what CSS z-index property is, how it works, its default value and the values it can have by giving some examples. We will also mention some use cases to give you ideas about where you can apply z-index in your web layouts.

What is CSS z-index?

Even though web pages are displayed on two-dimensional screens, a web page actually has three dimensions: X, Y and Z. X is the horizontal dimension which expands from the left of the screen to the right, Y is the vertical dimension from the top of the screen to the bottom, and Z is the depth dimension which you can think of it like the direction of an imaginary perpendicular line that is drawn from the screen surface to your eyes, going up towards your eyes and down behind the page.

Z axis, the depth of the page in other words, allows the placement and positioning of the web page elements in a stacking order, or layers. In the natural flow of an HTML document, the elements do not overlap, they are contained within their own space that doesn’t interfere with the space of other elements. However, using CSS techniques such as the position and z-index properties, the elements can be easily positioned and overlapped to achieve the design and functionality goals.

The CSS z-index property controls how the HTML elements stack on the Z axis of a web page. It allows you to position and display an element on top of the other elements or move an element behind the others. The z-index property is especially useful when you want to change the display order of overlapping elements that have absolute or fixed positions.

The following sample CSS rule assigns a z-index value of 1 to a navigation bar with fixed position:

z-index was introduced in CSS 2 and it has nice support across all modern web browsers. You can also check the z-index definition on W3.org if you would like to read more about it.

How Does CSS z-index Property Work

Web page elements have a natural stacking order by default. The z-index property intervenes with this order by specifying which elements will be displayed on top of the other elements in the Z axis. z-index property works on positioned elements, i.e. elements that have relative, absolute or fixed positioning. A greater z-index value means that the element will be in front of the other one and it can be said that it will be displayed closer to the viewer. The following is a basic example for two overlapping boxes with different z-index values:

 

The result will be like the following:

CSS z-index 1

When you assign a z-index value to an element, all its descendants (its child elements) will have the same stacking order as their parent element in the flow of the page. What this means is that if you place another box inside the gray box and give it a z-index value of 3, it will not be displayed above the black box because its parent (gray box) has a stacking order of 1 which is less than 2 of the black box.

Let’s see how that will look in the example below:

 

 

The result will be like the following:

CSS z-index 2

The z-index value must be an integer and it can have positive or negative values. Elements with positive z-index will be displayed on top of the elements with no z-index; similarly, elements with negative z-index will be displayed behind the elements with no z-index. If you give the same z-index value to different elements that don’t have parent-child relationship, they will be displayed based on their appearance order in the page structure.

The Default z-index Value of HTML Elements

The default z-index value of all the elements on a web page is auto, which corresponds to 0 where no z-index is assigned. An element with z-index: -1 will be displayed behind all other elements on the page, assuming they are given no z-index values. If the z-index is not defined for a child element, its default z-index value will be auto, which means that each child of a parent element will automatically have the stack order of its parent and will be displayed accordingly.

What Values Can CSS z-index Have?

z-index allows you to display HTML elements in a relative order on the Z axis of the page. Therefore, there is no absolute start or end values you should be paying attention to (except integer value limits). For example, you can give a z-index value of 100 to an element and a z-index value of 200 to another element, or a z-index value of -15 to another one. The important point here is that z-index is a way for assigning stacking order to elements relative to each other.

z-index property can have the following values:

  • auto – The default value.
  • number – Integer value, can be positive or negative.
  • initial – The initial value.
  • inherit – The parent element’s value.

Where to Use CSS z-index

You can use the CSS z-index property in a number of cases depending on your specific needs on your website or web application. For example you can use it for overlapping images in a photo gallery, you can use it on a tooltip or a popup window that appears when you hover over or click on an element. You can use it on navigation bars and dropdown menus which should be visible at all times, above other sections of the page. Image maps, layered layouts, social sharing buttons are some of the other possible uses of the CSS z-index property.

This was a brief introduction to z-index and we hope that it will be helpful while using this CSS property in your projects.

Comments