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.