Comments on: A Detailed Look at the z-index CSS Property

By: ylva

ylva — Fri, 03 Sep 2010 14:28:54 +0000

Thanks for your link and comment, Stefan! At last solved my problem with my z-indexes.. :)

By: TerryH

TerryH — Wed, 28 Jul 2010 15:51:18 +0000

Everything is positioned. None of the jqueries I tried have done anything to affect the z-index. IE is the best example of my page working as far as being able to mouseover and see the whole content for that page. Funny because I hear everyone saying IE doesnt work. Its the only one that does. I can only assume that z-index works differently for Firefox, chrome, safari…. I find a bunch of code but no one ever show a practical example. The examples always are typically written to display something but not to adapt and use anywhere but the example. Which makes it harder to utilize.
Thank for responding

By: Louis Lazaris

Louis Lazaris — Wed, 28 Jul 2010 13:43:15 +0000

When you set the z-index via jQuery, you might also need to set the “position” to “relative”, to ensure the z-index takes effect.

In fact, you have to set the position to “relative” for all the elements that are overlaying each other. So, it’s probably best to do that in the CSS. Other than that, I’m not sure how else to help you.

By: terryh

terryh — Mon, 26 Jul 2010 21:30:41 +0000

I am desperate to solve an issue with z-index. If you look at one of my examples:
http://outermotions.com/index-7.php
I am trying to make a website where I have button (menu) and when clicked they slide out a page form the right. The site never changes the whole page it just slides in new content on nav click. This page works well in some aspects. each button slides out a page like I want. One problem is that I want the content to slide out from under part of the background picture and to see all of the content I’d like to mouseover the content and it comes above the bit of picture. If you click on page (portfolio) it does this. Whats funny is this whole concept works in IE (believe it or not) but not in the other browsers. What seems to happen is the z-index’s wont let the mouseovers take affect. I’d like to change the z-index when button clicked so the active content is always on top.
I’m newbie with jquery, sorry….
The second issue is I’d like to close the open content when opening another content page. I have no idea how to do that in this slider case.
I would greatly appreciate any ideas or examples.

By: Stefan

Stefan — Wed, 30 Jun 2010 02:18:31 +0000

Thanks for this post! Very informative indeed, although it didn’t quite solve my z-index problem. :(
As Slatron commented, it’s also important to keep the stack order of elements in mind. If you have 2 seperate elements both containing siblings, these siblings will always remain within the z-index level of their parent element.
For example:

{div id=parent1}
{div id=child1)
{/div}
{/div}
{div id=parent2}
{div id=child2)
{/div}
{/div}

parent1 has a z-index of 20
parent2 has a z-index of 10
In this case, child2 could never overlap parent1 or child1, because of the hierarchy of the parent-elements. However I found a way to resolve this issue:

Don’t give parent2 any z-index !
Give parent1 a high enough z-index to overlap with parent2. (e.g. 20 or 30)
Give child2 a z-index high enough to overlap with parent1. (e.g. 40)

In this way, the z-index stack-order of parent2 will start at child2, whilst parent2 itself will remain in the stack-order as it was originally. Ofcourse all the elements with a z-index should also have a position defined.
I know it might be a little confusing, but if you don’t get it, read it a few more times..
Here is where I found a clear explanation about z-index and stack-orders:
https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context

By: 8 Good instances of z-index property | Blue Blog

8 Good instances of z-index property | Blue Blog — Wed, 24 Mar 2010 04:00:59 +0000

[...] A Detailed Look at the Z-Index CSS Property [...]

By: Peter

Peter — Tue, 19 Jan 2010 09:01:17 +0000

Thanks Louis – some really helpful z-index info here.

By: Z-Index And The CSS Stack: Which Element Displays First? | Programming Blog

Z-Index And The CSS Stack: Which Element Displays First? | Programming Blog — Wed, 02 Dec 2009 22:46:13 +0000

[...] Z-index is a little more complex than it first appears. It gets even more complex when you try to explain it. I hope I didn’t confuse you in trying to explain how z-index works. [...]

By: James

James — Fri, 30 Oct 2009 20:44:23 +0000

I am currently updating my web design knowledge and this brilliant article help me get what I need in my my new design. Thank you very much :)

By: Anthony

Anthony — Tue, 20 Oct 2009 15:26:53 +0000

Hello, first of all great article. I did learn alot however i am still having an issue with this. Here is my problem: On my website i have a header image in which i want to stay fixed at the top. Below the header i have all the content which i would like to slide up behind my header image. My markup is something like this:
…

button1
button2

all content goes here

…
When sliding the content up and down, it is on top of the header image. Any suggestions?