David Laakso wrote:
On 11/12/10 8:02 PM, John wrote:
David;
A brief question if you have time..you helped me with this code the
other day. Why does #bar need top: 0; left:0?
left: 0 I get, but isn't top: 0 at the top of the very page itself?
why can't that black bar have the same code, except for the z-index,
as the bar that's on top of it?
Thank you,
John
here's the code:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>stuff</title>
<style type="text/css">
html, body {
background : #fff;
color : #000;
margin : 0;
}
body {
font : 100% arial, sans-serif;
}
p {
color : #fff;
margin : 0;
}
#header {
position : relative;
width : 750px;
height : 100px;
background : #601603;
margin : 3em auto 0 auto;
border-left : 15px solid fuchsia;
z-index : 1;
}
#bar {
position : fixed;
top : 0;
left : 0;
margin-top : 3em;
width : 750px;
height : 100px;
background : #000;
}
</style>
</head>
<body>
<div id="header">
<p>header</p>
</div>
<div id="bar">
<p>b<br />a<br />r</p>
</div>
</body>
</html>
[snip]
I leave matters of profound nature for others to wrestle with and answer.
Best,
~d
The offset of top: 0 does place div#bar at the top of the viewport.
It's then pushed down by the value of the margin-top.
>> margin-top : 3em;
The offset value of left: 0 on div#bar does nothing. It is the same as
giving left: auto.
The CSS can be reduced to this.
#header, #bar {
position : relative;
width : 750px;
height : 100px;
background : #601603;
margin : 3em auto 0 auto;
}
#header {
background : #601603;
border-left : 15px solid fuchsia;
z-index : 1;
}
#bar {
position : fixed;
top : 0;
background : #000;
}
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
