When I first started using AJAX I soon came across a problem that had me stumped for a while. The problem was that some of the AJAX tools like hover menus, popup windows, calendars etc were appearing behind other controls on the page so that they would either be only partially displayed or not even displayed at all.

Now a lot of you reading probably already know the simple fix for this, but just in case there are some out there like me who got stuck at this point I hope this little tip can help.

There is a little property in CSS called Z-Index and to use the official description the z-index property sets the stack order of an element. An element with greater stack order is always in front of another element with lower stack order.

What this means is that the higher the Z-Index number of an element on the page the higher it will appear in the stack, so if you think of your page as a three dimensional element, the item with the highest Z-Index will be on the top of the pile of elements.

By default if you don’t specify your Z-Index for any css element then they all have a default of 0 and they will be stacked in the default order. So if you have a relatively simple requirement where you only need to ensure one item is always on top, all you need is this in the elements CSS properties:

.myelement
{
Z-Index: 1;
}

As long as no other elements have the same or higher Z-Index your element should appear at the top of the stack. Conversely you can also set a negative Z-Index number if you want to ensure an element is pushed lower down the stack.

For the official page on Z-Index go here.