Position
Mit Hilfe von position können Sie Bereiche auf Ihrer Webseite genau positionieren.
Folgende Angabe zu position sind möglich:
position:absolute = Absolute Positionierung zum Elternelement
position:fixed = Absolute Positionierung zum Broserfnster (bleibt beim Scrollen sehen)
position:relative = Relative Positionierung zum Elternelement
position:static = Keine spezielle Positionierung (Normale Einstellung)
Der InternetExplorer und Netscape bis 6.0 unterstützt fixed nicht. In Kurs
Browserweiche wird Ihnen ein Beispiel gezeigt, wie Sie den InternetExplorer dazu
bewegen können, trotzdem fixierte Bereiche anzulegen, deshalt werde ich erst in diesen Kurs weiter darauf eingehen.
Mit position: absolute im zusammenhang mit top: ..px; und left: ..px;
legen Sie fest, wo das Element absolute zum Elternelement positoniert wird. Dieses Funktioniert allerdings nur,
wenn das Elternelement eine andere Positionsart hat, als static oder keine Angabe hat.
Mit position: relative im zusammenhang mit top: ..px; und left: ..px;
legen Sie fest, wo das Element relative zum Elternelement positoniert wird. Wenn Sie z.B. left: 10px
angeben, bedeutes das, dass dieses Element 10 Pixel weiter links positioniert wird, als dies normalerweise der
Fall währe.
Gibt es bei absolute Position Überlappungen, wird normalerweise das zuerst notierte Element vom zuletzt
notierten Element überdeckt. Mit z-index können Sie die Reihenfolge ändern.
<html>
<head>
<title>Test</title>
<style type="text/css">
#box1 {
position:absolute; top:10px; left:10px;
width:100px; height:100px; z-index:1;
background:red; color:white;
border:solid 2px black;
}
#box2 {
position:absolute; top:20px; left:120px;
width:100px; height:100px; z-index:2;
background:blue; color:white;
border:solid 2px black;
}
#box3 {
position:absolute; top:200px; left:10px;
width:100px; height:100px; z-index:3;
background:green; color:white;
border:solid 2px black;
}
#box4 {
position:absolute; top:220px; left:30px;
width:100px; height:100px; z-index:4;
background:navy; color:white;
border:solid 2px black;
}
#box5 {
position:absolute; top:10px; left:300px;
width:200px; height:200px; z-index:5;
background:purple; color:white;
border:solid 2px black;
}
#box6 {
position:absolute; top:50px; left:20px;
width:100px; height:100px; z-index:6;
background:yellow; color:black;
border:solid 2px black;
}
</style>
</head>
<body>
<div id="box1">Bereich 1</div>
<div id="box2">Bereich 2</div>
<div id="box3">Bereich 3</div>
<div id="box4">Bereich 4</div>
<div id="box5">Bereich 5
<div id="box6">Bereich 6</div>
</div>
</body>
</html>
