Quatre images sont positionnées par rapport à un côté de la fenêtre, en l'occurrence, le haut, le bas, la gauche et la droite. Chacune des images ainsi que le texte descriptif placé au-dessus sont alignés selon un coin précis de leur boîte, respectivement ; le coin supérieur gauche, le coin inférieur gauche, le coin supérieur gauche et le coin supérieur droit.

Par ailleurs, tous les éléments sont en position absolue permettant donc de les placer aisément dans la page.
D'autre-part, la disposition des éléments HTML (au-dessus ou en-dessous) est commandée par leur position dans l'arbre du document, c'est-à-dire, l'élément en-dessous d'un autre sera donc en amont de ce dernier, et celui qui est au-dessus sera donc en aval de ce dernier. Par exemple, l'image positionnée par la propriété left est donc en aval des images top et bottom ce qui provoque son affichage au-dessus des deux dernières.
Enfin, n'importe quel élément peut être positionné par les commandes top, bottom, left et right, si bien que dans cet exemple, nous agissons sur des titres, des images, un tableau et une division contenant un paragraphe et une zone de texte préformatée.

h2, table, img {position: absolute}
.image {top: 300px; left: 380px}
.image2 {bottom: 50px; right: 200px}
.top {top: 25%; left: 20%}
.bottom {bottom: 10%; top: 70%}
.left {left: 10%; top: 40%}
.right {right: 10%; top: 25%}
.tableau {top: 1cm; right: 10cm}

<img ... class="image2">
<h2 class="image2"> ... </h2>
<img ... class="top">
<h2 class="top"> ... </h2>
<img ... class="bottom">
<h2 class="bottom"> ... </h2>
<img ... class="left">
<h2 class="left"> ... </h2>
<img ... class="right">
<h2 class="right"> ... </h2>
<img ... class="image">
<h2 class="image"> ... </h2>
<table border="1" class="tableau">
  ...
</table>