Layer-Technik und Transparenz

Durch Positionierung oder auch durch negative Abstände wie z.B. margin-top: -100px ist es möglich, Elemente ganz oder teilweise übereinander anzuordnen.


Transparente HTML-Elemente mit teilweiser Überlappung

Sichtbare HTML-Elemente sind normalerweise per Voreinstellung transparent. Überschneiden sich Inhalte solcher Elemente, ist der Effekt in etwa der wie in der Abbildung zu sehen. Anders wird es, wenn CSS-Hintergrund-Definitionen hinzukommen.


HTML-Elemente mit teilweiser Überlappung und definiertem CSS-Hintergrund

In diesem Fall überdeckt das später angezeigte Element das früher angezeigte Element. CSS ermöglicht in dieser Situation folgende Möglichkeiten:

  • Es ist möglich anzugeben, welches Element vor welchem anderen angezeigt werden soll (Schichtposition).
  • Es ist möglich, Elemente mit einem beliebigen Transparenzgrad zwischen voll deckend und voll durchsichtig zu versehen, um darunter liegende Inhalte ganz, teilweise oder gar nicht durchscheinen zu lassen.

Schichtposition von Elementen

Wenn Sie mehrere Elemente positionieren, deren Anzeigebereiche sich überlappen, werden die Elemente normalerweise in der Reihenfolge übereinander angezeigt, in der sie definiert werden. Im Quelltext später notierte Elemente überdecken vorhergehende. Sie können die Reihenfolge ändern, indem Sie für die einzelnen Elemente Werte vergeben. Elemente mit höherem Wert überdecken Elemente mit niedrigerem.

Beispiel

<div style="position: absolute; top: 100px; left: 100px;
z-index: 2; border: 1px solid #888; background: #f88;">
  <b>A:2</b><img src="mandala.png" alt=""
  style="width: 200px; height: 200px;">
</div>
 
<div style="position: absolute; top: 130px; left: 130px;
z-index:1; border: 1px solid #888; background: #88f;">
  <b>B:1</b><img src="mandala.png" alt=""
  style="width: 200px; height: 200px;">
</div>
 
<div style="position: absolute; top: 190px; left: 270px;
   width: 280px; height: 280px; z-index: 3;
   border: 1px solid #888; background: #eee;">
  <b>C:3</b>
  <div style="position: absolute; top: 30px; left: -30px;
  z-index: 2; border: 1px solid #888; background: #8f8;">
    <b>D:2</b><img src="mandala.png" alt=""
  style="width: 200px; height: 200px;">
  </div>
  <div style="position: absolute; top: -30px; left: 40px;
  z-index: 3; border: 1px solid #888; background: #ff8;">
    <b>E:3</b><img src="mandala.png" alt=""
  style="width: 200px; height: 200px;">
  </div>
  <div style="position: absolute; top: 60px; left: -60px;
  z-index: -1; border: 1px solid #888; background: #8ff;">
    <b>F:-1</b><img src="mandala.png" alt=""
  style="width: 200px; height: 200px;">
  </div>
</div>

Mit z-index beeinflusste Schichtposition von überlappenden Elementen

Erläuterung

Mit z-index: können Sie die Reihenfolge bei sich überlappenden Elementen bestimmen. Notieren Sie für jedes Element, für das Sie eine eindeutige Schichtposition festlegen wollen, eine Zahl. Je höher die Zahl, desto weiter oben liegt das Element, je niedriger, desto weiter unten liegt das Element im gedachten Stapel der Schichten. Die Schichtposition orientiert sich darüber hinaus an der des Elternelements. Positionierte Elemente erzeugen für sich und ihre Nachfahren einen eigenen Stapel-Kontext. So werden im Beispiel die Boxen D, E und F als Kindelemente der Box C gesondert sortiert: Box F (z-index: -1) überdeckt trotz niedrigerem Wert Box B (z-index: 1), da sie als Kindelement von Box C (diese liegt mit z-index: 3 über Box B) lediglich innerhalb dieser sortiert wird. Außerhalb des neuen Kontexts liegende Elemente (wie die Elemente A und B im Beispiel) können nicht dazwischen gestapelt werden.

Referenzinformationen

  • z-index
CSS2.0 MSIE FFOX CHROME SAF OP

Transparenz von Elementen

Offiziell eingeführt wird das Einstellen des Transparenzgrads (der Deckkraft) von Elementen erst mit CSS3. Wegen der Beliebtheit des Features ist die entsprechende CSS-Eigenschaft opacity aber schon längst in neueren Browsern verfügbar — zumindest in Verbindung mit herstellerspezifischen Präfixen. Außerdem gibt es eine schon sehr alte CSS-Technik von Microsoft, die auch den Internet Explorer seit langem befähigt, halbtransparente Elemente anzuzeigen.

Beispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titel</title>
<style>
body {
   margin: 0;
   padding: 0;
}
#topnavwrap {
   position: relative;
   background: url(wasser.jpg) no-repeat;
   width: 960px;
   height: 172px;
   margin-left: auto;
   margin-right: auto;
}
#topnav ul {
   position: absolute;
   bottom: 0;
   right: 0;
   margin: 0;
   padding: 0;
}
#topnav ul li {
   display: inline-block;
   list-style: none;
   width: 130px;
   height: 60px;
   background: url(linkback.png) repeat-x;
   position: relative;
   opacity: 0.5;
   -moz-opacity: 0.5;
   -khtml-opacity: 0.5;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   filter:alpha(opacity=50);
}
#topnav ul li a {
   position: absolute;
   bottom: 5px;
   left: 5px;
   font-family: Georgia,'DejaVu Serif',sans-serif;
   font-size: 23px;
   font-weight: bold;
   color: white;
   text-decoration: none;
}
 
</style>
</head>
<body>
 
<div id="topnavwrap">
<nav id="topnav">
<ul>
<li><a href="/home/">HOME</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/stuff/">Stuff</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>
</div>
 
</body>
</html>

Halbtransparente Navigation auf Hintergrundbild

Erläuterung

Das Beispiel realisiert eine halbtransparente Navigation auf einem Hintergrundbild. In ähnlicher Form sind häufig Kopfbereiche von Blogs oder Sites mit wenigen Hauptmenüpunkten aufgebaut. Die erforderlichen CSS-Eigenschaften sind im style-Bereich innerhalb des HTML-Kopfbereichs notiert. Die Maßnahmen zum Positionieren und Aussehen der horizontal dargestellten, ungeordneten Liste werden an dieser Stelle nicht näher erläutert. Zum Verständnis des Transparenz-Effekts wichtig ist jedoch die zweite verwendete Grafik, nämlich linkback.png.


linkback.png - verwendet als Hintergrund der halbtransparenten Listenelemente

Der eigentliche Transparenzeffekt wird durch opacity hergestellt. Im Beispiel wird der Wert 0.5 zugewiesen. Erlaubt sind Integer- und Float-Werte zwischen 0 (voll transparent, keine Deckkraft) und 1 (gar nicht transparent, opak, volle Deckkraft — definierter Hintergrund vorausgesetzt).

Da nicht alle Browser die erst mit CSS3 eingeführte opacity-Eigenschaft interpretieren, zieht die opacity-Angabe im Beispiel eine ganze Reihe von weiteren Formatdefinitionen nach sich, die letztlich alle die gleiche Angabe enthalten. Einige davon sind herstellerspezifische Präfix-Varianten. So werden mit -moz-opacity Firefox-Versionen bedient, die das Transparenz-Feature zunächst nur experimentell implementiert haben. Auffälliger sind jedoch die beiden Sprachkonstrukte, die mit -ms-filter bzw. filter beginnen. Beide Angaben sind für den MS Internet Explorer gedacht, der opacity bis einschließlich Version 8.0 nicht kennt. Die -ms-filter-Angabe bedient den IE 8.0, die filter-Angabe ältere IE-Versionen. Wichtig ist, dass zuerst die -ms-filter-Angabe und danach die -filter-Angabe notiert wird. Als Wert wird in beiden Fällen ein Wert zwischen 0 und 100 (Prozent) zugewiesen. 0 steht für voll transparent, 100 für gar nicht transparent (opak, volle Deckkraft), und alles dazwischen für mehr oder weniger halbtransparent.

Referenzinformationen

  • opacity
CSS3.0 MSIE9.0 FFOX CHROME SAF OPERA9.0
  • -ms-filter
MSIE8.0
  • filter
MSIE

 


Korrekturen, Hinweise und Ergänzungen
Bitte scheut euch nicht und meldet, was auf dieser Seite sachlich falsch oder irreführend ist, was ergänzt werden sollte, was fehlt usw. Dazu bitte oben aus dem Menü Seite den Eintrag Diskutieren wählen. Es ist keine Anmeldung erforderlich, um Anmerkungen zu posten. Unpassende Postings, Spam usw. werden allerdings kommentarlos entfernt.

Sofern nicht anders angegeben, steht der Inhalt dieser Seite unter Lizenz Creative Commons Attribution-ShareAlike 3.0 License