www.webdeveloper.com
Results 1 to 8 of 8

Thread: Z-index is mocking me!

  1. #1
    Join Date
    Jul 2009
    Posts
    32

    Question Z-index is mocking me!

    Hey Fellas

    The site in question is http://behman.com/aboutus.php

    I'm trying to get the .activetri class to position its background at the very top of the stack order as to show the active page the user is one. However, the .Imgheader class wont z-index underneath it.

    Ive tried ordering the divs with a stack order - doesnt work
    Ive tried doing a negative z index like here;
    Positioned elements paint on top of everything else if they don't have negative z-index. This means everything, including floats. This can be quite useful if, for example, you want something to paint on top of everything else, but you want a child of that item to be behind everything else. For that, you can position that element relative, with no z-index, and then position the child with a negative z-index. The first rule would paint the overlapping item above floats etc., while not creating a new stacking context. The second rule would push the child behind everything else.
    the specific HTML part is
    HTML Code:
    <div class="page_margins">
    <div class="page">
    <div class="activetri1">
    <img class="Imgheader" alt="Photogallery image" src="images/About-Us.jpg">
    </div>
    </div>
    </div>
    the specific CSS part is
    Code:
    img.Imgheader{
    position:relative; z-index:0; 
    }
    .activetri {
    background:url("../images/menuactive.png") no-repeat scroll 64px 0px transparent;
    
    }
    .activetri1 {
    background:url("../images/menuactive.png") no-repeat scroll 180px 0px transparent;
    }
    .activetri2 {
    background:url("../images/menuactive.png") no-repeat scroll 298px 0px transparent;
    }
    .activetri3 {
    background:url("../images/menuactive.png") no-repeat scroll 414px 0px transparent;
    }
    .activetri4 {
    background:url("../images/menuactive.png") no-repeat scroll 528px 0px transparent;
    }
    .activetri5 {
    background:url("../images/menuactive.png") no-repeat scroll 642px 0px transparent;
    }
    .activetri6 {
    background:url("../images/menuactive.png") no-repeat scroll 755px 0px transparent;
    }
    .activetri7 {
    background:url("../images/menuactive.png") no-repeat scroll 870px 0px transparent;
    }
    .activetri7, .activetri6, .activetri5, .activetri4, .activetri3, .activetri2, .activetri1, .activetri {
    position:relative;
    z-index:1;
    
    }
    Any ideas on how i can accomplish this, the funny thing is i made it work on firebug with the negative z-index trick but when i implemented; it didn't work. Thanks for the advice

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    You can't have a child element appear BENEATH the BACKGROUND of it's parent. Ever. Which is what you are trying to do.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Jul 2009
    Posts
    32
    Quote Originally Posted by aj_nsc View Post
    You can't have a child element appear BENEATH the BACKGROUND of it's parent. Ever. Which is what you are trying to do.
    ok so that means u have to change the class's of the activetri's to divs with the <img> tags nested in them... correct?

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    Well, technically, what I would've done, to make it semantic, is to just use the "active" class on the current LI item in the nav to have a background image and then set the z-index of the nav higher than the z-index of the header.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  5. #5
    Join Date
    Jul 2009
    Posts
    32
    Quote Originally Posted by aj_nsc View Post
    Well, technically, what I would've done, to make it semantic, is to just use the "active" class on the current LI item in the nav to have a background image and then set the z-index of the nav higher than the z-index of the header.
    Yes thats how i originally would have coded it myself. but unfortunately the client kept changing her mind. so the HTML isn't as semantic as it could have been!

    so would changing the Imgheader class to a DIV and not the IMG, then have the image nested inside, would that do the trick ?

    thanks for your input sir, i recognize that there are plenty of ways to achieve the result more semantically but i need to getting working with the least amount of edits.

  6. #6
    Join Date
    Dec 2005
    Posts
    2,984
    Yes. Both images have to be positioned (position: relative) and the image that was the background image has a higher z-index than the header image.

    Again, terrible way to do it because any img's that you have in your code should be relevant to your content (and thus add some SEO value), if not, then they should be, as you made it the first time, a background image. But I guess my stance on that has already been clear.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  7. #7
    Join Date
    Jul 2009
    Posts
    32
    I tried this in firebug and it didn't work either, i must be missing sthg theoretically. Any tips guys?

    I'm doing this on FF 3.6 btw

    HTML Code:
    <div class="page_margins">
    <div class="page">
    <div class="activetri1">
    <div class="Imgheader" >
    <img alt="Photogallery image" src="images/About-Us.jpg">
    </div>
    </div>
    </div>
    </div>
    the specific CSS part is
    Code:
    .activetri7, .activetri6, .activetri5, .activetri4, .activetri3, .activetri2, .activetri1, .activetri {
    position:relative;
    z-index:250;
    }
    img.Imgheader{
    position:relative; z-index:1; 
    }
    .activetri {
    background:url("../images/menuactive.png") no-repeat scroll 64px 0px transparent;
    
    }
    .activetri1 {
    background:url("../images/menuactive.png") no-repeat scroll 180px 0px transparent;
    }
    .activetri2 {
    background:url("../images/menuactive.png") no-repeat scroll 298px 0px transparent;
    }
    .activetri3 {
    background:url("../images/menuactive.png") no-repeat scroll 414px 0px transparent;
    }
    .activetri4 {
    background:url("../images/menuactive.png") no-repeat scroll 528px 0px transparent;
    }
    .activetri5 {
    background:url("../images/menuactive.png") no-repeat scroll 642px 0px transparent;
    }
    .activetri6 {
    background:url("../images/menuactive.png") no-repeat scroll 755px 0px transparent;
    }
    .activetri7 {
    background:url("../images/menuactive.png") no-repeat scroll 870px 0px transparent;
    }
    Last edited by Sabz; 08-10-2011 at 08:19 AM. Reason: add browser version

  8. #8
    Join Date
    Dec 2005
    Posts
    2,984
    My first post in this thread said:

    You can't have a child element appear BENEATH the BACKGROUND of it's parent. Ever. Which is what you are trying to do.
    I guess I should amend that so it says 'ancestors' instead of parent. Same rules apply - you cannot have a child element appear BENEATH a BACKGROUND image/color/gradient of any of it's ancestors. We'll call the background element the z-index limit - if an element has a background, every descendent element will ALWAYS appear above the background.

    You're z-index rules aren't making any sense.

    This is what I was referring to that you COULD do (although I highly discourage it)

    Code:
    <div class="activetri1">
    <img src="thebackgroundimage of activetri1" style="position: absolute; z-index: 2;">
    <img alt="Photogallery image" src="images/About-Us.jpg" style="position: relative; z-index: 1;">
    </div>
    That way you have elements positioned - the first absolutely so it doesn't interfere with where you ImgHeader falls in your document - and you are using z-indicies that have relevance to each other because they are on sibling, positioned elements.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles