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.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....
HavikNow 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?I don't think Netscape supports negative z-index.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,
---------------------------------
| |
| |
| |
| ------------------------ |
| | | |
| | | |
| | | |
| | | |
| | | |
---------------------------------
(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>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.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.
- 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.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....
HavikNow 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?I don't think Netscape supports negative z-index.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,
---------------------------------
| |
| |
| |
| ------------------------ |
| | | |
| | | |
| | | |
| | | |
| | | |
---------------------------------
(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>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.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.