A look into CSS z-index property

I love CSS, as you can tell from my blog posts on it such as font sizes in CSS and CSS box models. As a web developer focusing on front-end development at Blueprint, CSS, along with making custom WordPress themes, is my favorite part of development. Some CSS properties are used more often than others. Today, I will be writing about z-index, a very important property in CSS.

Z-index

In CSS, z-index property defines the stacking order for HTML elements on a page. The higher the number for z-index, the higher an element will appear in the stack. Z-index can be either positive or negative. That means an element with a high positive number (ex. 9999) will appear “on top” of other elements that have a lower z-index number. An element with a low negative number (ex. -1) will appear “behind” elements that have a higher z-index value.

Usually, HTML elements on a page have a natural stacking order, and the z-index is usually assigned by the order of appearance in the document flow. There are many factors that affect z-index, but usually an element nested in another element will have a higher z-index value.

To define the z-index property of an element in CSS, you must define the position of the element as absolute, fixed, or relative! This is very important to remember. If you assign a z-index value without defining the position, the z-index will not work because the position will be set to the default (position: static), which renders elements in the order they appear (document flow).

Z-index in Internet Explorer

One of the things that give web developers trouble sometimes is compatibility issues with Internet Explorer, particularly the older browsers 6 and 7. That is because IE6/7 have a lot of inconsistencies that do not follow “standard” CSS. Z-index is one of them. In IE 6 and 7, z-index is not defined by the document flow but by an element’s relation to other elements on the page. For example, let’s say you have the following code:

<ul class="nav">
	<li><a href="#">Link</a></li>
	<li><a href="#">Link</a>
		<ul class="subnav">
			<li><a href="#">Link</a></li>
			<li><a href="#">Link</a></li>
		</ul>
	</li>
	<li><a href="#">Link</a></li>
</ul>

<div class="content">
	Content
</div>

Let’s say the CSS is like this:

.nav {
	position: relative;
	z-index: 1;
}

.subnav {
	position: absolute;
	z-index: 9999;
}

.content {
	position: relative;
	z-index: 200;
}

In old IE browsers, the dropdown menu will be covered by the content because the parent element (<ul>) has a small z-index value compared to other elements. If you set the z-index value of the ul element to be higher than the content, the dropdown menu will appear on top of the content.

Conclusion

Z-index can be a tricky concept, especially in older Internet Explorer browsers. However, understanding the document flow and how z-index operates could make the development process easier.