Chris Kennon escribió:
Hi,
If it is positioned relative to the viewport, why does it stay confined
within the container?
If I understand correctly, your `fixed` div is showing from the top-left
corner of its container. If that's the case, there's one reason: you're
not positioning the block.
Try something like
div#a {
position: fixed;
top: 100px; /* or 0 */
left: 100px; /* or 0 */
}
I've uploaded a little example to
<http://dizque.lacalabaza.net/temp/fixed.html>.
And please remember: IE doesn't support `position: fixed`.
Regards,
Choan
On Jul 27, 2005, at 9:08 AM, Choan C. Gálvez wrote:
Chris Kennon escribió:
Hi,
Making sure I have grokked the CSS-P property-fixed, when an
element is fixed it is removed from the normal document flow and
positioned relative to its containing element,
Not exactly. It's positioned relative to the viewport. Every other
point is correct.
Regards,
Choan
and does not scroll when the document is? In the following example:
div#a would be removed from the normal flow and positioned relative
to the div#container, and would not move when the document is scrolled.
<style type="text/css" media="screen">
div#container{
margin: 0 auto;
width: 500px;
border: 1px dotted black;
}
div#a, div#b, div#c{
width: 100px;
height: 100px;
border: 1px solid black;
}
div#a{
background-color: red;
position: fixed;
}
div#b{
background-color: green;
position: relative;
top: 20px;
right: 50px;
left: 50px;
}
div#c{
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div id="a"><p>This is DIV a</p></div>
<div id="b"><p>This is DIV b</p></div>
<div id="c"><p>This is DIV C</p></div>
<div id="type"><p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diamesent luptatum zzril delenit augue duis
dolore te feugait nulla.
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
era
</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat
</p>
</div>
</div>
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
