1999-02-03 17:03:05 +00:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<style>
|
|
|
|
|
HTML {margin-top:2em; font-family:sans-serif}
|
|
|
|
|
HTML {border:solid lime 8px; padding:32px; background:green; color:white}
|
|
|
|
|
A.header-button {margin-top:.5em; margin-right: 1em;}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
1999-02-19 00:54:27 +00:00
|
|
|
<meta name="crc" content=4049295789>
|
1999-02-03 17:03:05 +00:00
|
|
|
<body>
|
|
|
|
|
<a name="intro""><h2>Introduction</h2></a>
|
|
|
|
|
This is a test of a document that has a fixed
|
|
|
|
|
<div style="position:fixed; top:0; left:0; width:100%; height:2em; background:#cccccc">
|
|
|
|
|
<a class=header-button style="margin-left:.5em" href=#intro>Introduction</a>
|
|
|
|
|
<a class=header-button href="#fixed">Fixed Positioning</a>
|
|
|
|
|
<a class=header-button href="#conclusion">Conclusion</a>
|
|
|
|
|
</div>
|
|
|
|
|
element along the top edge of the document. Notice that as the document scrolls the
|
|
|
|
|
fixed element doesn't move, because the fixed element is attached to the viewport.
|
|
|
|
|
<p>This example is very different from the next example which uses fixed positioning
|
|
|
|
|
to create a frame-like presentation. This example shows how you could use fixed positioning
|
|
|
|
|
to create a quick table of contents.
|
|
|
|
|
<p>Some of the other things this test shows are the use of margin, border, and padding on
|
|
|
|
|
the HTML element. It also shows scrolling of the viewport: because the document's initial
|
|
|
|
|
containing block (HTML element) is larger than the viewport, there's a vertical scrollbar.
|
|
|
|
|
It's the viewport that's scrolling, not the HTML element which is growing to accomodate
|
|
|
|
|
the document's content.
|
|
|
|
|
<p>This is loosely modeled after one of the tests in Ian Hickson's <i>Evil</i>
|
|
|
|
|
Test Suite.
|
|
|
|
|
<p>
|
|
|
|
|
<a name="fixed""><h2>Fixed Positioning</h2></a>
|
|
|
|
|
Fixed positioning is a subcategory of absolute positioning. The only
|
|
|
|
|
difference is that for a fixed positioned box, the containing block is established by the viewport.
|
|
|
|
|
<p>For continuous media, fixed boxes do not move when the document is scrolled. In this respect, they
|
|
|
|
|
are similar to fixed background images. For paged media, boxes with fixed positions are repeated on
|
|
|
|
|
every page.
|
|
|
|
|
<p>
|
|
|
|
|
<a name="conclusion"><h2>Conclusion</h2></a>
|
|
|
|
|
There are plenty of interesting things you can do with fixed positioning. This example shows
|
|
|
|
|
a fixed header, and the next example shows a frame-like presentation.
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
