SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Z-index help - layer is on top of other layer when it shouldn't be

    Hi there,

    I'm currently designing an error page, which you can see at the following URL:

    http://team1084.com/nothere

    Notice the text "404 Error" is in front of the actual error text. I want it to be behind, such that it blends in with the background.

    The HTML is simple and clean:
    HTML Code:
     <body>
     <div id="error">
     <h1 id="errnum">404 Error</h1>
     <div>
     <h2>The page cannot be found</h2>
     <p>The page you are looking for might have been removed, had its name changed, or it is temporarily unavailable.</p>
     <p id="errmsg"><em>HTTP/1.1 404 Not Found</em></p>
     </div>
     </div>
     </body>
    The CSS (url) is likewise relatively straightforward. The centered box is absolutely positioned, and the error number is also absolutely positioned using bottom:0 and right:0.

    The problem is, even though the error number comes first in the source, and its z-index is lower than that of the message, the number is on top.

    Any ways around this?
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!

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

    For an element to have a z-index it needs a stacking context. This is provided when some sort of positioning is applied to the element (e.g. position :absolute or position:relative}.

    If you don't want the element positioned (as in your case) then you just use position:relative without co-ordinates.

    This will allow you to set the inner div to a higher z-index than the 404 message.

    Code:
    #error div{z-index:3;position:relative;}
    Paul

  3. #3
    SitePoint Evangelist ucahg's Avatar
    Join Date
    Apr 2001
    Location
    Sarnia, Ontario, Canada
    Posts
    434
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, thanks a ton!

    I knew it would work if it were absolutely positioned, but I would never have guessed to use position:relative. Got it working now though
    Love it? Hate it? Helpful? Useless?
    Use the rate button to let me know what you think of my post!


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
  •