Absolute z-index

**PhilgB** · 04-30-2003 03:40 PM

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.

**havik** · 04-30-2003 03:47 PM

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

**PhilgB** · 04-30-2003 04:22 PM

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?

**Fang** · 05-01-2003 02:03 AM

I don't think Netscape supports negative z-index.

**nkaisare** · 05-01-2003 09:04 AM

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">

<div id="SecondDiv" style="position: absolute; margin: 80px 50px 0 50px;left: 0; top: 0;">
This div sits on top</div>
</body>

**PhilgB** · 05-01-2003 02:16 PM

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.

**Fang** · 05-01-2003 02:16 PM

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.

Thread: Absolute z-index

Thread Tools

Display

Hybrid View

Absolute z-index

ok...

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions