Hey guys. If anyone has Firebug and a quick second, would you mind peeking at my page and telling me what's wrong. Setting z-index but not working. Here's the layers I want:
1 (on top): access and footer and header
2: menu-bg
3 (behind everything): main
For the life of me, I can't get the menu-bg div to appear correctly behind the access div, in front of the main div, but behind the header and footer divs. Help?
Not sure if all these were necessary, but it works!
#footer {
z-index: 2;
}
.menu {
z-index: 1;
}
.subsidiary {
z-index: 2;
}
#menu-bg {
z-index:-10;
}
#main {
z-index: -1000;
}
#header {
z-index: 1;
}
I spoke too soon ... everything is good, except now the links to the blog titles aren't working. My guess is there is something over the top of it. What I don't understand is why the right sidebar seems to be on top, although it still resides in the same main div. Hmmm...
thats interesting approach to a thematic theme, thumbs up for that.
you are really gonna hit trouble using so many z-indexes tho.
i cant see why you need to use them?
the problem with links not clickable...
thats the -1000 on #main. as its sits within #wrapper, which hasn't been declared a z-index, therefore is 0.
i changed #main back to 0, and the links are clickable.
i would say you dont need #menu-bg either. couldn't that image just be applied as the #access background.
maybe needs a re-think
Yeh, I agree with you on all of it Jonny. Not sure why I went the way of making #menu-bg. Think it was one of those things that just left the mind without much thought, and it grew from there ...
So anyway, I've taken it away, but now I'm back to where I was: trying to get access to layer behind footer and header, but above main. Gonna fiddle with z-index some more. Let me know if you have any farther suggestions. Thanks a bunch. Really appreciate the help on a late night!
Don't really understand why I can't just use this ...
#access {
z-index:3;
}
#footer {
z-index:2;
}
#header {
z-index:1;
}
#main {
z-index:4;
}
middlesister
Member
In general, z-index only applies to positioned elements, i.e. elements who also has position:absolute, position:relative or postition:fixed (the default is position:static). If one or more of these elements don't have a position defined, try giving them position:relative as well as the z-index. This might make them behave differently in other areas, but it makes the z-index work.
I tried all that. I even have now re-structured the layout so that the access is inside the main div as a floating element. Still I can't get the footer and header on top. I've tried to work around it some by adjusting the image, so I guess that will have to do unless someone has some other device. Still not sure I understand thematic's z-indexing system.
middlesister
Member
It's not thematic's z-index system, it's how css works. And you are certainly not the only one being frustrated and annoyed in trying to understand it. :)
Z-index and positioning of elements are two of the trickier things to figure out. And of course, IE has its own way of doing things. If you want to read some nitty gritty details, see http://sweatte.wordpress.com/css-tips/#zindex
The default behaviour when no z-index is set is that the element that comes later in the source code will overlap the earlier ones. The z-index lets you override this and specify a stacking order, but in order to apply a z-index you need to also have a positioning set like I wrote above. The highest z-index goes on top. Sounds simple, right?
But - and here comes the tricky part - you also need to consider the nesting of elements. When you specify a position on the #main div, the #access div that is inside it will not be able to jump out of its container and the z-index will refer to its siblings inside of #main instead of the order of the whole document. In order for the #access div to move outside of its container, remove the positioning from #main (this will of course also make the z-index be ignored). This is similar to how absolute positioning works when the parent element has no positioning set vs if it has. In the first case, your absolute positioning will refer to the whole page, but as soon as the parent element has a positioning, your position:absolute will be relative to the parent element instead.
Clear as mud? You can play around with http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp to see how the different declarations make the elements behave.
I am not 100% sure on what effect you are after, but if you want the access div to be above main and the header and footer divs on top of that, i suggest something like this:
#header {
position:relative
z-index:7;
}
#access {
position:relative;
z-index:5;
}
#footer {
position:relative;
z-index:9;
}If main has any positioning set, remove that declaration or bring back the default behaviour with
#main {
position:static;
}Thanks, middlesister. I had all but given up hope. I owe you one. Give me a few years to master web programming and then I might have some wisdom you might deem wise. Until then, keep up the kindness.
This topic has been closed to new replies.