Erstelle zwei Boxen, welche sich folgendermaßen reihen:

(1.Version)

Danach ändere die Datei so, dass sich die Elemente so überlappen:

(2. Version)

Parameter

Die Boxen sollen im CSS-Stylesheet für den HTML-Tag <div> definiert werden. (padding, border, width, color, …)
Für diese Boxen sollen zwei Klassen (.box1 und .box2) erstellt werden, in denen die Hintergrundfarbe und die Positionierung definiert werden.
Die zweite Box soll bei der zweiten Version mittels „position:absolute;“ und den Einzügen „top: 2em;“ und „left: 4em;“ über die andere gelegt werden.

Mögliche Realisierung der Übung

Der HTML-Code mit CSS-Stylesheet ist hier einzusehen:

Zum Anzeigen hier klicken ⇲

Zum Verstecken hier klicken ⇱

<html>
 
<head>
<title>Positionierungsübung</title>
<meta name="author" content="user">
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<style type="text/css">
body {
     	font-family: Arial;
     }
 
div {
     width: 12em;
     color: #0000CC;
     border: dotted 1px;
     padding: 1em;
}
 
.box1 {
     background-color: #FFCC00;
     position:static;
}
 
.box2 {
     background-color: #FFFF99;
     position: absolute;
     left: 4em;
     top: 2em;
}
</style>
</head>
 
<body>
<div class="box1">Erste Box</div>
<br>Zwischentext<br><br>
<div class="box2">Zweite Box</div>
</body>
</html>
</body>
 
</html>

3.4.4.10.5) Positionierungsübung

Parameter

Mögliche Realisierung der Übung

Nützliche Links