z-index & jQuery

[alastair612]

Hello everyone, just before I ask my question i just want to say that i stumbled across css-tricks around two weeks ago and I have found it very useful, the screen-casts are excellent. I’m probably attempting something far to advanced for my experience here, but i find by jumping in the deep end you can usually learn lots more.

The Idea is two get the navigation to work exactly like file dividers work, and when you hover on a tab for the whole thing to slide out.

[img]http://grab.by/R2A[/img]

Live Example : http://dl.dropbox.com/u/355200/web/index.html

jQuery file : http://dl.dropbox.com/u/355200/web/jque … ry.tabs.js
(i’m using jQuery 1.3.2)

CSS Files : http://dl.dropbox.com/u/355200/web/style/links.css
http://dl.dropbox.com/u/355200/web/style/layout.css

The Problem is the the image file,
[img]http://dl.dropbox.com/u/355200/web/images/orangeTab.png[/img]
, that i’m using always seams to flow over the page-front div tag even though it was a lower z-index.

[img]http://grab.by/R2z[/img]

redTab z-index: 50 (works fine)
page-back z-index: 35 (works fine)
page-front z-index: 45 (works fine)
orangeTab z-index: 40 (appears to be above pagefront)

I’ve been trying various different ideas all weekend but to no avail and I’m getting disparate.

I’m sure there is something there is i’ve forgot to tell you but don’t hesitate to ask.

Thank you for your time, Al

Edit: I’ve just noticed on the live example (held on dropbox) that the red tab is not behaving it’s self either, i don’t know why.

[AshtonSanders]

First off: That’s bad ass. Good work.

Second: Your tabs are all working fine. The problem is that <div class="page-back" …> is z-index 35.That includes the red vertical bar. The Orange Tab has a great z-index.

I changed .page-back to be z-index: 50, and it worked for me.

Hope that helps.

[alastair612]

Does this mean that if you have a div2 nested inside a div1 with div1 having a z-index having say, 10 then even if the div2 has a z-index of 5 it will still appear above the div1 tag?

The problem with just increasing the z-index of page-back above the z-index of .orangeTab is that when it slides out if the mouse is on the left hand side of the tab, the movement means that it is no longer hovers and moves back in and things get a bit crazy.

Al

[AshtonSanders]

If two elements are absolutely positioned, they have their own Z-index. It doesn’t matter which one is nested.

Really? I have that trouble either way…

[Author]

Posts