Overusing z-index

z-index is a fascinating CSS property with complicated interworkings. For most Web designers, myself included, z-index is the ticket to getting certain page elements to “sit” on top of or float behind other elements. It especially shines when creating navigation bars that stick to the top of the page when scrolling and the “scroll to top” buttons, just to name two common examples.

However, in my travels and quest for Website design tips, tricks, knowledge, and useful libraries, I have found instances where z-index is abused. While the reasoning behind it may have been sound to begin with, Web design trends change, and what made sense then may not anymore, meaning such z-index usage might now be considered overuse or even abuse.

While I do not keep a record of all libraries and code snippets that may be overusing the mighty powers of z-index (and really, who would do such a thing? 😛 ), I do recall one project in particular that was a major offender in this area. I am not afraid to state the project name, as I have no real issues with the project. It is a good project that I like, but because of the way z-index was used, I chose to roll my own solution instead of adding overrides in my CSS to fix what arguably should not happen in the first place. My assumptions here may not be correct or even count as actual overuse, but it does accurately show how sometimes you can have too much of a good thing. This post aims to explain why it should not be happening and a way it could be remedied. 🙂

bxSlider bills itself as “The Responsive jQuery Content Slider”, and rightly so: it is indeed a responsive slider, even with embedded video players (WordPress.com previously had issues with resizing embedded YouTube players). bxSlider also has tons of configuration options to customize it to your exact needs. Overall, it is one of the best content sliders available.

My z-index issue with bxSlider falls in the navigation buttons on the left and right of the slider. If you look at the z-index property of the arrows on the slider’s homepage, you will find the following:

In case you cannot see it, z-index has a value of 9999. While this is certainly not the maximum value browsers will support, it can be considered to be the soft limit of how high z-index should be pushed.

This chosen value, although I dislike it (as I will explain), may serve purpose that I can understand. Many video embed players, especially plugin-based ones, have very high z-indexs, and if anything needs to float above the player that element in turn must have a high value. When writing LEGO Universe News! Patcher v2, I was required to push the z-index on the LUN logo kinda high in order for it to overlap a YouTube player. I am nearly certain this is partially the reason bxSlider chose such a high value of 9999: to always ensure video embed players never overlap the left and right buttons no matter the player/device screen size.

However, that value messed up my site layout. When viewed at a lower resolution, the left/right buttons overlapped my page’s elements. For a responsive content slider, it was a behavior I did not expect. Because I sometimes have cases of NIH syndrome and was under pressure to fix the issue, I chose to roll my own content slider that I could style and behave as I wished instead of adding some overrides in my CSS.

As I said, I like bxSlider and really have nothing against it. This has been my only gripe with it. However, I find it rather unfortunate this z-index value is used by default- even when a video embed player is not present. Yet such a high value can wreck a responsive layout. A better idea for bxSlider would be to use the lowest value possible for the buttons to float by default then use the 9999 value when the video option is enabled.

Unfortunately, if such overuse is present in such a small thing like a content slider, imagine how much more it is overused and abused in bigger things, like ads? According to Joseph Anastasio, z-index abuse is strong in advertisements, even seeing suggested values as high as six million.

I guess the “moral of this story” is to use z-index responsibly. In this case with bxSlider, it appears it may be an oversight by the developers and might not realize how in responsive design, every z-index level counts. However, in the case of some ads, there is intentional misuse and abuse (in his post Anastasio tells of an instance that demonstrates the abuse perfectly). A poorly overlaid element can make or break a site layout (thus UX), and as responsible Web designers we must be careful to not overindulge in the powers of z-index and be mindful of others, be it a content slider, scroll to top, or ads.



2 thoughts on “Overusing z-index

Comments are closed.