Absolute Positionierung - Quelltext - Cascading Style Sheets

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Absolute Positionierung, Z-Index - Cascading Style Sheets - Workshop Internet-Pr&auml;senz</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="DE" />
 <meta http-equiv="Content-Style-Type" content="text/css" />

 <meta name="description"
  content="&Uuml;bung Cascading Style Sheets. Absolute Positionierung, Z-Index" />
 <meta name="keywords" content="HTML, Cascading Style Sheets" />
 <meta name="author" content="Roland Unger" />

 <style type="text/css">
 <!--

  .box1, .box3 {
     border: 1px solid #c0c0c0;
     background: #fff;
     padding: 0.2em 0.5em;
     position: absolute;
     width: 15em;
     left: 2em;
  }

  .box1 {
     top: 9em;
  }

  .box2 {
     top: 9.75em;
  }

  .box2, .box4 {
     border: 1px solid #c0c0c0;
     background: #ffffee;
     padding: 1em 0.5em 0.2em;
     position: absolute;
     width: 15em;
     left: 4em;
  }

  .box3 {
     top: 17em;
     z-index: 1;
  }

  .box4 {
     top: 17.75em;
     z-index: 0;
  }

 -->
 </style>
</head>

<body>

<h1>Workshop Internet-Präsenz</h1>

<h2>Absolute Positionierung - Cascading Style Sheets</h2>

<div class="box1">Box 1 mit Text.</div>

<div class="box2">Box 2 mit Text. Da Box 2 später notiert
wurde, wird sie oberhalb der Box 1 dargestellt.</div>

<div class="box3">Box 3 mit Text.</div>

<div class="box4">Box 4 mit Text. Mit dem z-index lässt
sich die Darstellungsreihenfolge ändern.</div>

</body>
</html>