HTMLにはブロックレベル要素とインライン要素が存在しますが、 CSSではこれらを「display」プロパティによって指定できます （ただし、ブラウザが対応していなければ意味がないが ．．．ここの実例はNN4では正常表示できない）。
ここで紹介する方法は上記のブロックレベル要素に対してのもので、「display」プロパティで「block」に指定するか、 ブロックレベル要素に対してのみ有効です。前後関係の文法的なことを考慮しなければ、DIV要素を用いることで対応ができます。
「z-index」プロパティを用いて、重なり合ったブロックの重ね合う順序を指定します。 つまり、どのブロックの上にどのブロックを置いて、というようなことを任意に指定できます。 CSS2対応ブラウザのみご使用になれます。（IE4,IE5とNN4が一部。実例はIE4,IE5のみ対応）
上の実例のサンプルを下に示します。
「z-index」プロパティのとる数値（正の整数）が大きいほど上に上書きされます。 例では、１〜４を使っています。
HTMLの文書構造が存在しなくなる書き方はあまり奨められません。（実例も含む） 本来は、HTML文書が存在し、それに対してCSSを適用する方法が奨められています。 つまり、CSS無しでも正常に文書の閲覧が可能なようにするべきです。
JavaScriptと組み合わせたダイナミックHTMLサンプルも用意しました。 断っておきますが、IE4以上でしか動作しません。
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META Http-Equiv="Content-Style-Type" Content="text/css">
<STYLE Type="text/css">
<!--
DIV.example1{
position: absolute;
top: 10px;
left: 10px;
width: 400px;
height: 80px;
z-index: 1;
text-align: center;
font: 900 24pt monospace;
color: blue;
background-color: #ccccff;
border: 5pt ridge #0000ff;
margin: 0.2em;
padding: 0em;
}
DIV.example2{
position: absolute;
top: 70px;
left: 290px;
width: 250px;
height: 70px;
z-index: 2;
text-align: center;
font: 900 24pt monospace;
color: red;
background-color: #ffcccc;
border: 5pt ridge #ff0000;
margin: 0.2em;
padding: 0em;
}
DIV.example3{
position: absolute;
top: 50px;
left: 50px;
width: 250px;
height: 50px;
z-index: 3;
text-align: center;
font: 900 24pt monospace;
color: green;
background-color: #ccffcc;
border: 5pt ridge #00ff00;
margin: 0.2em;
padding: 0em;
}
DIV.example4{
position: absolute;
top: 120px;
left: 100px;
width: 300px;
height: 50px;
z-index: 4;
text-align: center;
font: 900 24pt monospace;
color: black;
background-color: #cccccc;
border: 5pt ridge #000000;
margin: 0.2em;
padding: 0em;
}
-->
</STYLE>
</HEAD>
<BODY>
<DIV Class="example1">z-index : 1</DIV>
<DIV Class="example2">z-index : 2</DIV>
<DIV Class="example3">z-index : 3</DIV>
<DIV Class="example4">z-index : 4</DIV>
</BODY>
</HTML>