Position Absolute


<style type="text/css">
table.meinebox {
position:absolute;
top:30px;
left:50px;
background-color: #FFFFCC;
width: 200px;
z-index:1;
}
</style>

Dieser Tabelle wurde der selbstdefinierte Stil "meinebox" zugewiesen.

<table class="meinebox">

Mittels position:absolute wird eine absolute Position definiert und zwar mit top:30px, das heißt 30 Pixel vom oberen Rand und left:300px; also 300 Pixel vom linken Rand befindet sich die obere linke Ecke der Tabelle. Ferner habe ich noch die Weite der Tabelle mit 200 Pixeln festgelegt.

z-index:1; kommt erst dann zum Tragen, wenn man mehrere Elemente hat, die sich überschneiden. Der z-index legt fest, welche Box oder Tabelle oben liegt, oder in welcher Reihenfolge die Elemente angeordnet sind.

Position:absolute wird häufig in div Tags eingesetzt. Auch damit lassen sich fest positionierte Boxen erzeugen.

Siehe auch diese Seite und ändere dort die Größe des Browserfensters.


Startseite nächste Seite