The Z-index CSS Property

Most CSS properties can be simple to deal with. Often, applying a CSS property to a take into account your markup can have instant results  as soon as you refresh the page, the worthiness looking for the property becomes effective, and you see the result immediately. Other CSS properties, however, are more complex and definitely will only work under a given list of circumstances.

The z-index property is among the latter group. z-index has undoubtedly caused the maximum amount of confusion and frustration because other CSS property. Ironically, however, when z-index is fully understood, it’s a super easy property to utilize, while offering a highly effective way for overcoming many layout challenges.

In the following paragraphs, we explain exactly what z-index is, how it has been misunderstood, and well talk over some practical purposes of it. We also describe a few of the browser differences that may occur, particularly in previous versions of Ie and Firefox. This comprehensive have a look at z-index must provide developers with the excellent foundation as a way to make use of this property confidently and effectively.

All-natural Stacking Order

In an HTML page, natural stacking order (i.e. your order of elements for the Z axis) is set by a number of factors. Below is a list showing an order that items fit into a stacking context, applying the bottom of the stack. A list assumes none of the items has z-index applied:

Past and borders with the element that establish stacking context

Elements with negative stacking contexts, as a way of appearance

Non-positioned, non-floated, block-level elements, so as of appearance

Non-positioned, floated elements, to be able of appearance

Inline elements, so as of appearance

Positioned elements, so as of appearance

The z-index property, when applied correctly, can transform this natural stacking order.

Of course, the stacking order of elements isn’t evident unless elements are situated to overlap each other. Thus, to view natural stacking order, negative margins can be used shown below:

Syntax

The z-index property can affect the stack order of both block-level and inline elements, and is declared by a positive or negative integer value, or a value of auto. A value ofauto gives the element the same stack order as its parent.

Here is the CSS code for the third example above, where the z-index property is applied correctly:

#grey_box {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
  background: #ddd;
  position: relative;
  z-index: 9999;
}

#blue_box {
  width: 200px;
  height: 200px;
  border: solid 1px #4a7497;
  background: #8daac3;
  position: relative;
  z-index: 500;
}

#gold_box {
  width: 200px;
  height: 200px;
  border: solid 1px #8b6125;
  background: #ba945d;
  position: relative;
  z-index: 1;