3.4.4.7) Positionieren von Elementen
Statische Positionierung
Die statische Positionierung ist die häufigst-angwendete, und darum auch die Standardpositionierungsart. Die Elemente werden damit im normalen Textfluss dargestellt, wie bisher bei allen Beispielen.
Die CSS-Regel für die statische Positionierung ist position: static - weil es aber sowieso die Standardeinstellung ist, muss diese nicht angegeben werden.
(X)HTML/CSS-Beispielcode anzeigen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="content-language" content="de" />
<title>TITEL</title>
<style type="text/css">
/* <![CDATA[ */
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>statische Positionierung</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* <![CDATA[ */
div {
width: 12em;
color: #0000CC;
border: dotted 1px;
padding: 1em;
}
.box1 {
background-color: #FFCC00;
position:static;
}
.box2 {
background-color: #FFFF99;
position:static;
}
/* ]]> */
</style>
</head>
<body>
<div class="box1">Erste Box</div>
<div class="box2">Zweite Box</div>
</body>
</html>
Absolute Positionierung
Bei der absoluen Positionierung werden die Element aus dem Textfluss genommen, und an eine festgelegte Stelle gerückt. Dadurch können sich auch mehrere Elemente überlagern.
Angegeben wird wieder Positionierungstyp mit position: absolute, während die Position mit den Eigenschaften left: .., top: .., right: .. und bottom: .. festgelegt wird. Die Werte für diese Eigenschaften können beliebige Längenangaben mit allen bekannten Einheiten sein. Sie beziehen sich, wenn es kein übergeordnetes Element gibt, das selbst mit position: absolute; positioniert wird, auf das Browserfenster - ansonsten auf das übergeordnete Element (aber eben nur unter der Bedingung, das dieses übergeordnete Element selbst absolut positioniert ist!).
Meist gibt man für left, top, right und bottom einen Wert mit der Einheit em an, weil sich das Design somit an die Schriftgröße es Benutzers anpasst.
Die Eigenschaften stehen immer für Abstände, also top: legt den Abstand vom obersten Rand des Browserfensters bzw. des übergeordneten Elements fest.
Man verwendet immer ENTWEDER top: .. ODER bottom: .. bzw. left: .. ODER right: ..
Beispiel 1: 2 DIVs ohne übergeordnetes Element
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Positionierung</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* <![CDATA[ */
div {
width: 12em;
color: #00C;
border: dotted 1px;
padding: 1em;
}
.box1 {
background-color: #FC0;
position:static;
}
.box2 {
background-color: #FF9;
position: absolute;
left: 4em;
top: 2em;
}
/* ]]> */
</style>
</head>
<body>
<div class="box1">Erste Box</div>
<div class="box2">Zweite Box</div>
</body>
</html>
Beispiel 2: 2 DIVs ohne übergeordnetes Element, 1 DIV das einem der beiden DIVs untergeordnet ist
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Positionierung</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* <![CDATA[ */
div {
width: 12em;
color: #00C;
border: dotted 1px;
padding: 1em;
}
.box1 {
background-color: #FC0;
position:static;
}
.box2 {
background-color: #FF9;
position: absolute;
left: 4em;
top: 2em;
}
.box3 {
background-color: #CCF;
position: absolute;
left: 4em;
top: 2em;
}
/* ]]> */
</style>
</head>
<body>
<div class="box1">Erste Box
</div>
<div class="box2">Zweite Box
<div class="box3">Dritte Box</div>
</div>
</body>
</html>
An Beispiel 2 sieht man: Wäre der Bezugspunkt immer das Browserfenster, und nicht das übergeordnete Element, müsste die 3. Box an der gleichen Position wie die 2. Box sein.
Beispiel 3: gleich wie BSP2, jedoch wird die übergeordnete Box nicht mehr mit position: absolute positioniert
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Positionierung</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* <![CDATA[ */
div {
width: 12em;
color: #00C;
border: dotted 1px;
padding: 1em;
}
.box1 {
background-color: #FC0;
position: static;
}
.box2 {
background-color: #FF9;
}
.box3 {
background-color: #CCF;
position: absolute;
left: 4em;
top: 2em;
}
/* ]]> */
</style>
</head>
<body>
<div class="box1">Erste Box
</div>
<div class="box2">Zweite Box
<div class="box3">Dritte Box</div>
</div>
</body>
</html>
Beispiel 3 zeigt die Bedingung für die Beziehung zwischen übergeordnetem und untergeordnetem Element.
Relative Positionierung
Bei der relativen Positionierung wird ein Element relativ zu ihrem eigentlichen (unsprünglichen) Platz (im Textfluss) positoniert. Dabei verändert sich die Position der umgebenden Elemente nicht.
(X)HTML/CSS-Beispielcode anzeigen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Positionierung</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* <![CDATA[ */
div {
width: 12em;
color: #00C;
border: dotted 1px;
padding: 1em;
}
.box1 {
background-color: #FC0;
position: static;
}
.box2 {
background-color: #FF9;
position: relative;
left: 4em;
top: 2em;
}
/* ]]> */
</style>
</head>
<body>
<div class="box1">Erste Box</div>
<div class="box2">Zweite Box</div>
<div class="box3">Dritte Box</div>
</body>
</html>
Fixierte Positionieurng
Die fixierte Positionierung funktioniert wie die absolute, mit 2 Unterschieden:
Die Positionsangaben beziehen sich IMMER auf das Browserfenster, nicht auf eventuelle übergeordnete Elemente
Das Element scrollt mit den übrigen Elementen nicht mit, es bleibt immer an dieser einen Stelle.
(X)HTML/CSS-Beispielcode anzeigen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Positionierung</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* <![CDATA[ */
body {
font: 100.01% sans-serif;
color: #00C;
background-color: #fff;
}
div {
width: 12em;
border: dotted 1px;
padding:1em;
}
.box1 {
background-color: #FFCC00;
position: static;
}
.box2 {
background-color: #FFFF99;
position: fixed;
left: 4em;
top: 2em;
}
/* ]]> */
</style>
</head>
<body>
<div class="box1">Erste Box</div>
<div class="box2">Zweite Box</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
</html>
Überlappungen (z-Achse) und Durchsichtigkeit
Überlappungen
Wie bereits gesehen kann es bei manchen Positionierungstypen zu Überlappungen kommen. Will man festlegen, welche(s) Element(e) dabei vorne liegen, macht man das mit der Eigenschaft z-index: - je höher der Wert dieser Eigenschaft, desto weiter vorne erscheint das Element. Der Wert muss in keiner bestimmten Folge angegeben werden, sondern es können beispielsweise auch die Werte 5, 16, 33, 67 vorkommen. z-index funktioniert nur bei absolut positionierten Elementen.
(X)HTML/CSS-Beispielcode anzeigen
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>z-index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
/* <![CDATA[ */
div {
width: 12em;
color: #00C;
border: dotted 1px;
padding: 1em;
}
.box1 {
background-color: #FC0;
position: absolute;
left: 0;
top: 1em;
z-index: 3;
}
.box2 {
background-color: #FF9;
position: absolute;
left: 4em;
top: 2em;
z-index: 1;
}
.box3 {
background-color: #FFF;
position: absolute;
left: 6em;
top: 3em;
z-index: 2;
}
/* ]]> */
</style>
</head>
<body>
<div class="box1">Erste Box</div>
<div class="box2">Zweite Box</div>
<div class="box3">Dritte Box</div>
</body>
</html>
Durchsichtigkeit (Opacity)
Ebenfalls interessant ist die Eigenschaft opacity:, diese gibt den Durchsichtigkeitsgrad eines Elements an. Leider wird diese derzeit noch von vielen Browser unterschiedlich implementiert. Als Wert für opacity: gibt man einen Wert zwischen 0 und 1 an.