You see it everywhere, or on a lot of sites and you’ve always wondered how on earth images or text seem to be stacked on top of each other? If you haven’t heard about it, then you’ll be surprised that you can actually have layers on a site. Just like layers in photoshop, you can put multiple images on top of each other, or place text on top of a banner with ease by using a CSS property called z-index.
Say we have a banner, but we wanted to add a “New” ribbon on top of it without having to go back to Photoshop and put the ribbon on the images that need a “new” ribbon. Sure you can do that, but what if you had to put it on products, and there’s 20 products that are new? Do you want to go through every image and save it out and then edit it again when they aren’t new anymore, or do you just want to code it once and take it off when the products are no longer new?
So before we get to actually mimicking layers in CSS we need some materials to stack with. For the purpose of this tutorial, I’ll be using two images. However, you can do this with divs, text, css background images, and any different kind of elements.
Here are my two separate images.
For this tutorial, we’re going to forget about the HTML doctypes, and just make a simple HTML document with 2 IMG tags as displayed here:
<html>
<style type="text/css">
.banner{
position:relative;
}
.tag{
position:relative;
}
</style>
<img class="tag" src="newtag.png" />
<img class="banner" src="banner.png" />
</html>
As you can see, we just have two images side by side and they both have a class name. One of the first things we need to do is to make them appear on top of each other. In order to do this, we give the image or div or object that we want to be stacked on top an CSS attribute of position:absolute and the object that will be the bottom a css attribute of position:relative. I’ll explain the true meaning of these in a different tip/tutorial.
<html>
<style type="text/css">
.banner{
position:relative;
}
.tag{
position:absolute;
}
</style>
<img class="tag" src="newtag.png" />
<img class="banner" src="banner.png" />
</html>
After doing that change, we notice that the “new” tag picture is now placed in the top and left but also it’s now behind the banner. We want the exact opposite. And now we will use the property of “z-index” with CSS to give the elements a new dimension (sort of) hence the z like the x, y, and z axis.
<html>
<style type="text/css">
.banner{
position:relative;
z-index: 1;
}
.tag{
position:absolute;
z-index: 10;
}
</style>
<img class="tag" src="newtag.png" />
<img class="banner" src="banner.png" />
</html>
By using “z-index” we are able to tell the browser that a certain element should be on top of other elements or stacked. By default, the z-index of elements are generally 0. You can use any number for your z-index, even negatives. I would only use negatives if you plan to put something behind your content or something. It’s a good practice to have some sort of scheme in doing your z-indexes. For example, you’ll see a lot of coding where people start using ridiculous numbers like “z-index: 100000″ or “z-index: 9999″. Technically, it’s not needed, but it’s better to be standard in your coding then doing random numbers.
And of course you need to position the “New Tag” image to be placed well on the banner. Since we gave the image an attribute of “position:absolute”, we can easily use the properties of “left” and “top” to move the tag pixel by pixel until it reaches the desired result. For other elements, you can also use margins and paddings depending on what you know/works.
<html>
<style type="text/css">
.banner{
position:relative;
z-index: 1;
}
.tag{
position:absolute;
z-index: 10;
top: 15px;
left: 14px;
}
</style>
<img class="tag" src="newtag.png" />
<img class="banner" src="banner.png" />
</html>
Your numbers may differ, but here is the actual result done with that code.
And there we have it, 2 images stacked on top of each other, and if you need to just tag a product with a new tag, then all you need to do is copy that IMG tag and place it in where you need it since the CSS will carry itself over all the pages on your site if you imported it externally on all of them.
You will notice that when positioning these elements on top of each other that using top: and left: will start to jump images to the top of the browser and things like that. You need to be familiar with position: relative and position: absolute and how they interact with each other when being contained in a div or other elements. I’ll try to cover that in the next tip.
That’s the tip of the day: Working with z-index. It’s a simple piece of code, but you’ll be surprised how many times you’ll be using it especially dealing with navigation, extensive graphics on the site, and just simply trying to move a text above a box. Thanks for viewing and make sure to subscribe and follow my updates.
If you want to contribute a tutorial, resource, or some inspirational links, just send them through, and we'll get them featured!
this was a really good tutorial on the z index i liked it alot…
Thank you for this simple but really valuable tutorial! Exactly what I was needing – the ability to composite inside HTML.
[...] Layers in HTML/CSS – “Z-index Property” | Creative-Le Studios Jun 30, 2010… images or text seem to be stacked on top of each other? … Here are my two separate images. … [...]
simple process well done good job