http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Tue, 21 May 2013 16:14:16 +0000 http://themeshaper.com/forums/topic/z-index-trouble#post-21338 Tue, 17 May 2011 17:20:01 +0000 4rederick 21338@http://themeshaper.com/forums/ <p>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. </p> http://themeshaper.com/forums/topic/z-index-trouble#post-21329 Mon, 16 May 2011 20:29:40 +0000 middlesister 21329@http://themeshaper.com/forums/ <p>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. :)</p> <p>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 <a href="http://sweatte.wordpress.com/css-tips/#zindex" rel="nofollow">http://sweatte.wordpress.com/css-tips/#zindex</a></p> <p>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 <em>also</em> have a positioning set like I wrote above. The highest z-index goes on top. Sounds simple, right?</p> <p>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 <em>inside</em> 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.</p> <p>Clear as mud? You can play around with <a href="http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp" rel="nofollow">http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp</a> to see how the different declarations make the elements behave.</p> <p>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:</p> <pre><code>#header { position:relative z-index:7; } #access { position:relative; z-index:5; } #footer { position:relative; z-index:9; }</code></pre> <p>If main has any positioning set, remove that declaration or bring back the default behaviour with</p> <pre><code>#main { position:static; }</code></pre> http://themeshaper.com/forums/topic/z-index-trouble#post-21328 Mon, 16 May 2011 14:18:19 +0000 4rederick 21328@http://themeshaper.com/forums/ <p>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. </p> http://themeshaper.com/forums/topic/z-index-trouble#post-21322 Sun, 15 May 2011 05:46:18 +0000 middlesister 21322@http://themeshaper.com/forums/ <p>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. </p> http://themeshaper.com/forums/topic/z-index-trouble#post-21321 Sun, 15 May 2011 05:06:12 +0000 4rederick 21321@http://themeshaper.com/forums/ <p>Don't really understand why I can't just use this ...</p> <p>#access {<br /> z-index:3;<br /> }<br /> #footer {<br /> z-index:2;<br /> }<br /> #header {<br /> z-index:1;<br /> }<br /> #main {<br /> z-index:4;<br /> } </p> http://themeshaper.com/forums/topic/z-index-trouble#post-21320 Sun, 15 May 2011 04:45:13 +0000 4rederick 21320@http://themeshaper.com/forums/ <p>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 ... </p> <p>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! </p> http://themeshaper.com/forums/topic/z-index-trouble#post-21319 Sun, 15 May 2011 04:11:48 +0000 Jonny Janiero 21319@http://themeshaper.com/forums/ <p>thats interesting approach to a thematic theme, thumbs up for that.<br /> you are really gonna hit trouble using so many z-indexes tho.<br /> i cant see why you need to use them?</p> <p>the problem with links not clickable...<br /> thats the -1000 on #main. as its sits within #wrapper, which hasn't been declared a z-index, therefore is 0.</p> <p>i changed #main back to 0, and the links are clickable.<br /> i would say you dont need #menu-bg either. couldn't that image just be applied as the #access background.</p> <p>maybe needs a re-think </p> http://themeshaper.com/forums/topic/z-index-trouble#post-21318 Sun, 15 May 2011 03:48:05 +0000 4rederick 21318@http://themeshaper.com/forums/ <p>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... </p> http://themeshaper.com/forums/topic/z-index-trouble#post-21317 Sun, 15 May 2011 03:25:44 +0000 4rederick 21317@http://themeshaper.com/forums/ <p>Not sure if all these were necessary, but it works!</p> <p>#footer {<br /> z-index: 2;<br /> }</p> <p>.menu {<br /> z-index: 1;<br /> }</p> <p>.subsidiary {<br /> z-index: 2;<br /> }</p> <p>#menu-bg {<br /> z-index:-10;<br /> }</p> <p>#main {<br /> z-index: -1000;<br /> }</p> <p>#header {<br /> z-index: 1;<br /> } </p> http://themeshaper.com/forums/topic/z-index-trouble#post-21316 Sun, 15 May 2011 03:08:35 +0000 4rederick 21316@http://themeshaper.com/forums/ <p><a href="http://www.josephfrederick.com" rel="nofollow">www.josephfrederick.com</a> </p> http://themeshaper.com/forums/topic/z-index-trouble#post-21315 Sun, 15 May 2011 03:02:09 +0000 4rederick 21315@http://themeshaper.com/forums/ <p>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:</p> <p>1 (on top): access and footer and header<br /> 2: menu-bg<br /> 3 (behind everything): main</p> <p>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? </p>