SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Non-Member
    Join Date
    Jan 2004
    Location
    Seattle
    Posts
    4,328
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 Z-Index in 1 Container?

    If you have several elements inside another element - say <div class="container"> - can two or more of those elements have different z-indexes?

    <div class="container>
    <div id="title">My Book</div>
    <div id="subtitle">I wrote it myself!</div>
    <image>
    </div>

    Could I use absolute positioning - or something else - to hide the image under the title?

    More specific still...

    I made banners - images - for each of the world's nations and all 50 states. Each one measures 50 pixels high, though the widths vary somewhat, from about 250-350 pixels.

    However, I also want to have text titles, for two reasons:

    1. Search engines
    2. Visitors with images disabled

    Hiding the text behind the banners is a bit tricky, as the position and size of the text changes if visitors change their text size. So I came up with a neat scheme. I place a large div with a background image that matches the overall page's background over the title. If you kill the images, the false background disappears, and the title appears. Restore the images, and the false background once again masks the title.

    Ideally, I'd like to put all the elements at the top of my page - text title, subtitle, banner, false background, quote, etc. - in one container...<div class="top">. But when I do that, it becomes really difficult to place the title beneath the false background.

    I suspect I'll have to stick to my present strategy - insert the text title as a separate element. But I just wondered if there's another solution.

    Thanks.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You can set the z-index for each element in a container as long as the parent container has a sstacking context.

    This means the parent must have a property for position set. If you use position:relative without co-ordinates (if you don't want the element to move) then you can set the z-index for the parent. The children must also be positioned in someway (either relative or absolute) for the z:index to take effect.

    The higher the z-index the closer to you the element will appear. The lower the z-index the further away it will be. It is recommended not to use negative z:indexes as they are handled differently by browsers and the results will be unreliable.

    Here is a short example that you can play with to understand what is happening.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Z index example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #outer {
     position:relative;/*gains stacking context for z-index reference */
     background:red;
     width:150px;
     height:150px;
     z-index:1;
    }
    #inner1 {
     position:absolute;
     width:100px;
     height:100px;
     left:50px;
     top:50px;
     z-index:2;
     background:green;
    }
    #inner2 {
     position:absolute;
     width:100px;
     height:100px;
     left:50px;
     top:50px;
     z-index:3;
     background:yellow;
    }
    #inner3 {
     position:absolute;
     width:100px;
     height:100px;
     left:50px;
     top:50px;
     z-index:4;
     background:blue;
    }
    #inner4 {
     position:absolute;
     width:100px;
     height:100px;
     left:50px;
     top:50px;
     z-index:5;
     background:pink;
    }
    </style>
    </head>
    <body>
    <div id="outer"> 
      <div id="inner4">Inner 4</div>
      <div id="inner3">Inner 3</div>
      <div id="inner2">Inner 2</div>
      <div id="inner1">Inner 1</div>
    </div>
    </body>
    </html>
    Although #inner1 comes last in the html it is hidden by #inner4 which is in fact the first element inside the outer. This is because 'inner4 has a higher z-index.

    Just change the z-index and see how the elements move to the front or back etc.

    As regards to other elements on the page that are outside this nested stacking context then it is the parents z:index that will detemine if the whole stack overlaps another element or not. The z:index of the children are only in relation to the parent and not other elements on the page.

    Hope that helps with your example

    Paul


Bookmarks

Posting Permissions

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