The Z-Index is a CSS property that defines the order in which items on a webpage are shown – if they were placed on top of each other. If you are mathematically inclined, the Z-index tells you how far along the z-axis something is.
If not, it helps to think of a webpage as being like a stack of papers you are viewing from above. There are multiple levels, and the piece of paper on the top level has the highest z-index.
This is an important concept in online advertising as if an ad has a low z-index then it will appear behind other content on the page. Generally the highest Z-Index possible is 999,999,999.
CSS Markup
To change the z-index of something on a page, you simply need to add the CSS markup z-index: number. For example, below there is a div using the following markup so that it floats behind the text.
div style=”border: dotted 2px black; background: #dddddd; z-index: -1; position: absolute; left: 40%; width: 350px; height: 50px;”
For more details about using z-index in CSS, try the W3 Schools page.
Z-Index Example
As computer screens are flat it is easy to think of web pages as being flat. But that is not entirely true. We have all experienced websites which have pop-ups on them which appear over content (technically called overlays or floaters).
These bits of webpage ‘float’ over the rest of the page by having a higher z-index. This means that instead of having to redesign the whole page to have something appear, it can load ‘in front’ of the content that is already there.
A common example of this is the pop-up boxes that ask you to switch on push notifications for a site. They can use a high z-index to appear in front of content:
Practical Usage
In this example, there are ads floating on the background area of the site too. To make this happen, you could set the z-index as follows:
- background = 1
- background ads = 2
- site content = 3
- ads in content = 4
- push notification box = 999,999,999.
There are a few things to note about this. Firstly, if you want something to definitely appear in front of everything else, you should set it with a very high z-index. The maximum is 999,999,999 – and so if you set it at this level nothing can pop in front of it.
Secondly, it would be risky to set the other z-index levels sequentially like that. You should make them 10, 20, 30 etc instead of 1, 2, 3. This is to give yourself room to manoeuvre when you add other pieces of content. For example, if you needed something to float in front of some text, then this could cause issues with your ads.
By adding an extra 0, you can then have some site content with a z-index of 35 for example, without changing the rest of the site.
Thirdly, ads should have a slightly higher z-index than the content they sit on. This is to stop odd situations from occurring, such as text overspilling and pushing an ad out of the way. By having your ads float slightly above the content of the page you can be more confident that your site will appear how you want it to regardless of little mistakes popping up.
Common Z-Index Uses
The z-index is not the only way to make content appear in front of other content. It is, however, a fairly simple to use and a basic part of any web designer or web developers toolkit.
Cookie policy banners pop up in front of content to ensure you deal with them:
Some cookie policy banners use the z-index to appear in front of content
Anchor ads are types of ads that float over the bottom of the content of a page. They are mostly used on the mobile version of websites:
This type of ad format has been around for years
The most common anchor ad on desktop is a Video overlay. This ad format floats over the corner of a page:
We do not recommend using video overlay ads as it will slow down your site and annoy your users. You will make more money in the short-run, but drive off too many users in the long run for it to be very profitable.
Some overlays are aimed at getting you to subscribe to a product, site or newsletter:
These are often set to trigger either when you scroll down, or when you move your mouse to leave a page
Summary
