SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    Colonel Jack O'neill Josh_'s Avatar
    Join Date
    Apr 2004
    Location
    NC
    Posts
    689
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    z-index isn't cooperating

    so here's a basic example of what i'm trying to accomplish
    Code:
    <html><head><title>Untitled Document</title>
    
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head><body>
    
    
    
    <div style="background: yellow none repeat scroll 0%; width: 500px; height: 500px;">
      <div style="background: green none repeat scroll 0%; width: 260px; height: 260px;z-index: 200; position: relative; top: 1px; left: 1px;"> 
        text </div>
      
      <div>
    
        <div style="background: red none repeat scroll 0%; width: 400px; height: 400px;z-index: 100; position: relative; top: 1px; left: 1px;"> 
          lots of text in this div </div>
      </div>
    
    
    
    </div>
    
    
    </body></html>
    but the green div should be above the red div, and it's definitely not. what am I doing wrong?

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is. But since they are not overlapping, you can't see it. Try setting top:-50px and left:50px for the red DIV, and you'll see.
    Birnam wood is come to Dunsinane

  3. #3
    Colonel Jack O'neill Josh_'s Avatar
    Join Date
    Apr 2004
    Location
    NC
    Posts
    689
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    It is. But since they are not overlapping, you can't see it. Try setting top:-50px and left:50px for the red DIV, and you'll see.
    Oh snap, thanks. That was really frustrating I really appreciate it.


    I can't use position:absolute or I would have, thanks though.

  4. #4
    SitePoint Member
    Join Date
    Oct 2007
    Location
    Australia
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To quote htmldog.com,
    position:relative is a relative position that is offset from the initial normal position in the flow.
    You'll get the result you expect with position:absolute


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
  •