RetroZilla/webshell/tests/viewer/samples/test11.html

43 lines
2.1 KiB
HTML
Raw Normal View History

2015-10-21 05:03:22 +02: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>
<meta name="crc" content=4049295789>
<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>