Loading ...
Z-Index : Overlap HTML Elements With CSS
Via this guide, you will learn what a Z-Index is and how to use this property to overlap HTML elements with CSS.
What is a Z-Index
Z-index is an property in CSS and has been included in CSS because people asked for an property with the possibility to make HTML elements overlap. Overlapping HTML elements can have a lot of advantages. You can make the important parts of your website fall out from the background some more.
How to use Z-Index?
Z-index uses values to identify which element is more important then the other. The default value is 0. Usually, I give the item that should be on top value 20, the less important 10 and the least important item 1.
It doesn’t really matter which numbers you give to the Z-index. The only thing you should remember is that your top item should have to highest value. But adding Z-index to items isn’t enough to make things work.
For our example, we will use the following HTML structure. Those boxes should get ‘Z-indexed’ later on!
1 2 3 4 5
<div class="box1">Blue = Div #1 </div>
<div class="box2">Pink = Div #2 </div>
<div class="box3">Yellow = Div #3 </div>
Click here to take a look at an example I made. The item that should be on top (because of the Z-index value) is not on top: the boxes are displayed under each other instead of on top of each other. It looks like the Z-index is not working in this example, right?
The codes I have used in this example. It should work was my first guess as well.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
div.box1 {
height: 250px;
width: 250px;
background-color: blue;
z-index: 1;
}
div.box2 {
height: 100px;
width: 300px;
background-color: pink;
z-index: 20;
}
div.box3 {
height: 125px;
width: 125px;
background-color: yellow;
z-index: 10;
}
What’s up?
The Z-index requires an other property to style the elements that should get ‘Z-indexed’. Our element requires the position property is set to absolute to make things works. Otherwise our Z-index won’t work, as can be seen in the example above.
It’s now time for an example that works. The boxes has been styled with the right properties and is ready to be used. A working Z-index example can be found here.
These are the codes I used here. I simply added an position:absolute; and a couple placement values (top, left) to the boxes. It works!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
div.box1 {
position: absolute;
top: 20px; left: 20px;
height: 250px; width: 250px;
color: white;
background-color: blue;
z-index: 1;
}
div.box2 {
position: absolute;
top: 150px; left: 10px;
height: 100px; width: 300px;
background-color: pink;
z-index: 20;
}
div.box3 {
position: absolute;
top: 15px; left: 175px;
height: 125px; width: 125px;
background-color: yellow;
z-index: 10;
}
We are done
I hope you now have fully understood the Z-index principle. You should always remember to add a position:absolute; property, or your Z-index will not work! If you have any questions regarding this subject, contact me or leave a comment.
great post!! your blog is very good… congratulations…
Thanks a lot for your timely help…
Hmmmm…
Pink on white, never a good idea. and I am almost certain that height is not a cross browser compliant command anymore.
But at least you have taken the time to write something which is more than me.
@Avangelist – Pink on white? What are you talking about? Height not cross browser compliant? I don’t understand your comment.
tincho 1492 | Martín – Thanks for that comment.
Helle Stefan
I stumbled over your blog following a link from a Danish weblog. I actually like the content here – especially your CSS guides. Keep’em comming!
Tot ziens from Denmark
Hello!
Thanks for visiting and thank you for your compliment! I have visited your blog as well, but unfortunately I can’t understand Danish.
Tot ziens from Holland!
[...] [...]
Is there a way to do this without using style sheets?
Would you try content or something like that?
oops i put something in code before and after the word “content” in that comment, so you cant see it :\
@Rob – There is a way, when using Inline CSS. You should style the div like this:
< *div style="z-index:1; position:absolute;">< */div>
and div 2:
< *div style="z-index:10; position:absolute;">< */div>
It sure is available without CSS, (via Javascript I guess) but that makes things a lot harder. Try using this way, and if you want to know anything else, let me know.
* remove the star (WordPress won’t allow me to post codes.)
Thank you for this tip. Will have to experiment with this when I come to design some web pages. I never really knew that this was possible but it looks interesting.
Thanks, you do that.
Is css worth taking a year to learn or how long does it actually take to learn. I am just wondering cause this article really dragged me into it and im just wondering if it is easier to hire someone to do css work for me, or should i learn it and therefore save money. Let me know your opinion Please.
ps – for Webwork visit http://www.CoderPhase.com and meet the best freelancers now.
Regards
Most Excellent! This will definitely help me when i’m creating wordpress themes!!
Thank you
thanks for this, i have bookmarked your site and look forawrd to seeing more tutorials
thanks once again.
Bebo Skins !
Awesome tip. This will do wonders for our themes. thanks again admin
Thanks for your reminder, i’ve been using z-index for a while now.
Very informative post. Great step-by-step guide for people to follow.
Keep them coming
this example not supported for all web browser.
good tips, i really like css and this is help me in my project. thanx!
Great stuff, i always like to learn more about css or just get a different perspective. I will come back and read more
Thanks for this post, i will test it now!
ive been looking for something like this for ages and have seriously had to changes my designs big time because i wasnt sure how to code the layout to overlap but with this it now will, thanks!!
Z-index, when used cleverly, can be a powerful tool. I remember drooling over overlaid images and div elements on some websites back when I didn’t know about Z-index.
And lets face it, Z-index hasn’t been very well documented, now has it? Much like everything else advanced in CSS. Bummer…
Absolutely correct. Happy that HTML5 and CSS3 is there.
Z-Index is very important but is it supported under all doctypes?
Freelance web design – David Leonard Tampa bay web design
Stefan,
Thanks for the code.
Maybe with this post more people will utilize the power of Z-index. It will make for stronger, faster webpages won’t it?
Won’t really make a difference, just give you some more control over positioning different elements on your web page.
Hi!
first of all thanks for the nice blog post about z-index. it really came useful. i have a query about using z-index in a css slider on my website.
actually i need to make the slider lower z-indexed and a button “read more” higher so that the slider changes while the button keeps it place all the time.
is it possible
Thanks again
z-index also work with position:fixed;
I believe you are correct, thanks.
I wish i found this blog 3 months ago, the z-index were about to make my go crasy this summer. UR now bookmarked! I’ll be back
The solution is finally there. Happy you found it!
Sounds Good……………..
thanks for last sentence : “You should always remember to add a position:absolute; property, or your Z-index will not work!”
Great tutorial but did I miss something; I couldn’t see and example of the final “correct” version?
Thanks; this link should work.
http://www.divitodesign.com/dd-articles/z-index/working.html
that tricky little position property makes all the difference. Another article with a good link to a full explanation here:
http://onegiantmedia.com/css-z-index-not-working-to-order-depth-position-of-div
cheers
Cheers, good one.
Thank you so much for your help. This is really help me in time. Thanks a lot.
This seems nice…but…
When you scroll with the browserwindow scrollbar, the DIV with ‘position:absolute;’ stays on the same place while the rest scrolls.
Or am I doing something wrong?
please rewrite the beginning of this article as it is wrong and is sure to be causing confusion.
the assertion that the zindex is not working in your first example is wrong, and your use of the term ‘under’ in this manner shows that you are yourself confused about this property.
zindex does not deal with the FLOW of the elements; it only deals with the order of OVERLAPPING elements. your first example has no OVERLAPPING elements, therefore the zindex has no discernible affect, which is proper.
and you do not need to have absolute positioning for zindex to work. any overlapping elements will be affected by zindex and absolute positioning is not the only way for that to occur.
given how high this page ranks in google, you would be doing a lot of people a favor by removing/rewriting the misleading portions.
thanks.
It still worked when one of my elements was “position relative.”
Thx!
it doesnt work for me anyway, cant get what i’m doing wrong!
sorry found the problem and i am sure many had it, by default for example div is transperant, so it looks like doesnt overlap, but when u put background it works fine.
I know Bill said your instructions were wrong (see above) but they worked for me. Wrong or right, I appreciate the help.
I have a z-index issue when I move the navigation links over to the right, under the dropdown box. I need the links to go behind the drop down box.
The links are absolutely positioned with a z-index: -9999 !important but I still can’t get it to work.
http://www.selected.telegraph.co.uk/