http://appro.mit.jyu.fi/opetusteknologia/luennot/luento4/asemointi.html

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<link href="asemointi.css" rel="stylesheet" type="text/css" title="Tyylipohja" />
<title>CSS-asemointi esimerkki erilaisista asemointitavoista</title>
</head>
<body>

<div class="base">
Absoluuttisesti asemoitu laatikko 1 (css: base)

<div class="absolute">
Absoluuttisesti asemoitu laatikko 2 (css: absolute)
</div>

<div class="fixed">
Kiinteństi asemoitu laatikko 1 (css: fixed)
</div>
</div>

<div class="absolute">
Absoluuttisesti asemoitu laatikko 3 (css: absolute)
</div>

<div class="fixed2">
Kiinteństi asemoitu laatikko 2 (css: fixed2)
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec turpis nibh, 
condimentum ac, venenatis quis, hendrerit in, nisl. Nulla sodales. Suspendisse 
potenti. Curabitur arcu. Maecenas tincidunt nunc eget felis ullamcorper lacinia. 
Curabitur quis sem. Fusce mi ante, facilisis eget, hendrerit quis, mollis ut, 
nibh. Ut sit amet justo. Praesent accumsan tristique sem. Curabitur dignissim. 
Morbi bibendum sapien eget sapien. Quisque sapien. Morbi justo ipsum, sodales 
in, euismod vitae, gravida et, libero. Pellentesque faucibus aliquam nisi. Nulla 
pellentesque scelerisque urna. Integer luctus nunc in eros. Vestibulum rutrum, 
dolor mattis ultrices malesuada, odio orci interdum felis, sit amet viverra 
massa lorem ac lectus. Nullam accumsan ante porttitor est.
</p>
<p>
Nunc sit amet lacus vel purus suscipit mattis. Aenean in pede. Phasellus quis 
lectus. Phasellus vel leo sed leo sodales cursus. Vivamus lobortis commodo 
ipsum. Nulla facilisi. Nullam eget leo. Vestibulum hendrerit pellentesque 
turpis. Suspendisse nunc turpis, venenatis egestas, sagittis lacinia, vehicula 
placerat, augue. Donec sed ipsum semper eros egestas malesuada. Cras enim risus, 
malesuada eget, euismod sit amet, dapibus eget, lorem. Nullam eu est eget justo 
vulputate rhoncus.
</p>
<p>
Donec ut ipsum vel lacus blandit interdum. Integer urna. Vivamus rhoncus, quam 
eu egestas porttitor, urna ipsum aliquet eros, ullamcorper blandit magna urna a 
sem. Cras nisi. Nunc euismod gravida lectus. Aenean diam est, sollicitudin nec, 
tempor in, volutpat vitae, dolor. Ut nec sapien eget tellus viverra congue. 
Quisque tincidunt, est ac laoreet adipiscing, velit pede placerat mi, vitae 
eleifend ligula lorem nec urna. Aliquam sed diam. Nulla molestie ipsum non 
lorem. Phasellus porttitor laoreet metus. Ut at sapien.
</p>
<p>
Donec quis sem. Quisque accumsan. Donec in turpis sed leo pharetra ornare. Nulla 
tristique, nulla at egestas condimentum, odio orci porta augue, vitae facilisis 
ante nulla vitae neque. Morbi interdum. Maecenas sed nisi. Nunc est libero, 
rutrum ac, rutrum ac, fermentum eu, turpis. Vestibulum egestas dolor. Nunc a 
ligula. Nullam odio diam, ornare nec, pulvinar quis, placerat sed, sem. Nunc 
velit. Nam leo. Morbi nec magna. Mauris arcu lacus, faucibus et, consequat in, 
mollis commodo, erat. In hac habitasse platea dictumst. Nunc ut lectus sit amet 
mauris fermentum volutpat. Proin ut massa. Donec dapibus cursus erat. Nam orci 
enim, scelerisque nec, lacinia ac, iaculis tincidunt, nibh.
</p>
<p>
Vivamus leo lacus, gravida eget, feugiat sit amet, lobortis sit amet, tortor. 
Aliquam rutrum dui a odio. Integer pulvinar leo eu nunc. Suspendisse potenti. 
In lobortis luctus massa. Praesent congue rhoncus turpis. Pellentesque bibendum 
dolor quis dui. Nulla ac tellus. Nullam sed elit. Praesent ac magna. Praesent 
augue. Duis mollis dui a ipsum. Proin nec est sed orci pellentesque laoreet.
</p>
</body>
</html>