SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: z-index problem

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    London, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question z-index problem

    Hi all,

    I've searched long & hard in this forum & elsewhere for an answer, but so far a blank - so any ideas welcome.

    I'm trying to put a <span> image below & left & behind a <div> content-box like I've illustrated here. It shouldn't be a problem if I give it a lower z-index, but it's not happening. I know that for z-index to work, the <div>'s have to be assigned a position, which I've done, but it just doesn't work. Here's the code:
    Code:
    CSS
    
    div#content  {z-index: 2; position: absolute; top: 26px; left: 134px; right: 25px;
       color: #5F5F5F; background: #ffffff; padding: 10px; 
       border: solid 2px #5F5F5F}
    .box {z-index:0; position:relative; left:-100px; bottom:-100px; width:200px; height:200px;}
    
    HTML
    <div id=content>...lots of content, then...
    <span class="box"><img src="image.gif" width="250" height="164" border="0"></span>
    </div>
    Thanks in advance.
    Last edited by beesman; Aug 12, 2002 at 14:54.

  2. #2
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Firstly, a z-index can only be applied to a div.

    Also, 'nested' divs will not be displayed at a lower z-index than their parent div.

    In such cases where nested divs have a lower z-index than the (top) parent, all the z-indexes of the nested divs will be ignored.
    They will be stacked progressively higher based on the order in which they appear in the code.


    Hope this helps
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2002
    Location
    London, UK
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks -

    so your saying that it's not possible to place a <div> 'behind' its parent <div> when the former is positioned relatively to the latter?

  4. #4
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check this link out: http://www.brainjar.com/css/positioning/stackdemo.html

    It might help explain things to you.
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  5. #5
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by beesman
    thanks -

    so your saying that it's not possible to place a <div> 'behind' its parent <div> when the former is positioned relatively to the latter?
    The same stacking rules still apply regardless of whether the div positioning is absolute or relative.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


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
  •