www.webdeveloper.com
Results 1 to 7 of 7

Thread: Absolute z-index

Hybrid View

  1. #1
    Join Date
    Nov 2002
    Location
    Canada
    Posts
    65

    Absolute z-index

    First div
    - position:absolute; top:0; left:0; width:100%; z-index:1;
    Second div
    - margin:80px 50px 0 50px; z-index:2:

    I want the second 'div' to appear over top of the first one.
    With the first 'div' z-index set to -1 it worked in IE, but nothing else.

    How can I get this to work?

    Also, the 80px margin doesnt do anything to the second 'div' in netscape. Did I miss something?

    Thanks.

  2. #2
    Join Date
    Jan 2003
    Location
    Peg City
    Posts
    638
    margin:80px 50px 0 50px;

    is this order:

    margin: top, right, bottom, left;

    so 80px should be the top margin. If this isn't working, this should (yet its longer to code)

    margin-top: 80px; margin-right: 50px; etc....

    Havik

  3. #3
    Join Date
    Nov 2002
    Location
    Canada
    Posts
    65

    ok...

    Now I know that the margin problem is related to the 'first div'. When I set it to display:none; the margin was applied properly... any thoughts?

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    I don't think Netscape supports negative z-index.

  5. #5
    Join Date
    Jan 2003
    Location
    Atlanta, GA
    Posts
    571
    I think Netscape supports negative z-index. However negative z-index means that your positioned element appears *below* the page, hence it essentially disappears. Hence, its better to use positive integer z-index values.

    How can I get this to work?
    What exactly do you want? According to your code,
    Code:
    ---------------------------------
    |                              |
    |                              |
    |                              |
    |   ------------------------   |
    |   |                      |   |
    |   |                      |   |
    |   |                      |   |
    |   |                      |   |
    |   |                      |   |
    ---------------------------------
    (side margins are 50px, top margin is 80px)

    Since the first div spans the entire screen, you wouldn't need it. What you are doing in your code can be achieved as follows as well:
    <body style="margin: 0">
    <!-- First div contents can be put here instead -->
    <div id="SecondDiv" style="position: absolute; margin: 80px 50px 0 50px;left: 0; top: 0;">
    This div sits on top</div>
    </body>

  6. #6
    Join Date
    Nov 2002
    Location
    Canada
    Posts
    65
    My bad, the first spans the width of the screen but is only 100px high.

    I want the second to appear over the edge of the div by about 20px; 80px from the top.

    I have it working with the top div set relative and margin-bottom:-20px; to pull the second over it a bit, but ive been in this 'absolute positioning' situation before and would like to know how to do this.

    Also, an Opera problem with absolute positioning. Even with both the first and second divs set to relative, i have a 'date' div which floats above everything in the top right corner. It works fine in every browser except Opera7. I havent tested it in any other opera browser.

    Thanks.

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    I was half right, NN4.x doesn't support negative z-index.

    Is this what you want to do:

    <div id="div1" style="position:absolute; top:0; left:0; width:100%; z-index:1;background:red;">First div
    <div id="div2" style="margin:80px 50px 0 50px; z-index:2;background:blue">Second div</div>
    </div>

    Works the same in IE and NN.
    Last edited by Fang; 05-01-2003 at 02:27 PM.

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