Minimalism on the z-index property
I really don't see why people are purposely doing z-index: 99999 for the highest priority layer when you have like what.. 20 division layers?! who comes up with these numbers anyways?!
How about just using z-index: 1 or z-index: 2 etc. It's a much simpler approach to stacking your division layers. We won't ever need 99999 different division layers each being stacked higher than the other layer. It's a joke and will never happen! Let's just use increments of +1 or -1. At most a website might end up with ~20 division layers but not all will need to be stacked on top of each other.
Here are two methods I found pretty handy for z-index property:
Positive Increments Method
So you have two layers with backgrounds but want one to be on top of the other. You can stack the layers accordingly by using positive increments. There's really no need to make the second layer z-index: 99999 just put the next number up! Think of positive increments as a blank poster board in which you glue items on it until your happy with what you got. You can glue some on top of the others etc.
.content { position:relative; font-size:12px; z-index:3; } .background { /* primary background */ position:relative; background:url('primary-bg.png') repeat; z-index:1; } .background2 { /* this will be on top of the primary background */ position:relative; background:url('stripes.png') no-repeat; z-index:2; }
<div class="background"> <div class="background2"> <div class="content"> Hey, this is a test page! </div> </div></div>
Negative Increments Method
This method is different but I actually prefer it because.. we'll I'll explain. The advantage of setting your z-index property to negative values is that you can keep your main content away from all the clutter of stacking layers. Your main content layer at default is set at 0 so by setting all the other layers to negative values, your main content that has texts, images, etc. will stay in front.
.content { position:relative; font-size:12px; } .background { /* primary background */ position:relative; background:url('primary-bg.png') repeat; z-index:-2; } .background2 { /* this will be on top of the primary background */ position:relative; background:url('stripes.png') no-repeat; z-index:-1; }
Remember, the further behind you want the layer the greater the negative value is, unlike with positive values you just go from 1, 2, 3, etc. counting upwards. But with negative values we go from -3, -2, -1 etc. then reaching to 0 and upwards as needed. Notice this method doesn't require you to add a z-index to the .content layer.
<div class="background"> <div class="background2"> <div class="content"> Hey, this is a test page! </div> </div></div>
With this negative increments method, we can now safely say that all layers behind the main content are negative values and all layers on top of the main content are positive values. It's just a neat way to distinguish between stacked layers!
If you don't know what z-index property is you can read more about it here.
