diedVIPs

html knowhow

Überlagerung - <z-index>






Z-index gibt an, in welcher Reihenfolge Elemente angeordnet werden. Elemente mit einem größeren z-index liegen dabei näher am Betrachter und können Elemente mit kleinerem z-index überlagern. Z-index ist eine ganze Zahl und kann negativ und positiv sein.

Das z-index-Attribut kann folgende Werte besitzen:

auto, das Element wird behandelt, als hätte es den z-index Wert 0. Es bildet aber keinen neuen Stapelkontext. Eine ganze Zahl, das Element wird wie oben beschrieben positioniert. Eine größere Zahl bedeutet näher am Betrachter.

inherit, z-index des Elternelements. Wird z-index für ein Element nicht explizit gesetzt, ist der Standard-Wert auto. Eine Vererbung des z-index des Elternelements muss explizit mit z-index:inherit ausgelöst werden.



Links

Tag Beschreibung

<a>

Defines a hyperlink

<a href="index.html">START</a>

Interner Link: "START" wird im Browser blau unterstrichen angezeigt und kann angeklickt werden.

<a href="https://www.xyz.de/">START</a>

Externer Link: "START" wird im Browser blau unterstrichen angezeigt und kann angeklickt werden.

<a href="https://www.xyz.de/" target="_blank"> START</a>

Beim anklicken von START wird in einem neuen Browserfenster der Seite "https://www.xyz.de/" geöffnet

<a href="#xy">START</a>

Sprungmarke: Beim anklicken von START wird in der gleichen Seite ein mit Textmarke generiertes Ziel angesprungen.

<a href="mailto:hans. busch@web.de"> hans.busch@web.de</a>

So kann eine E-Mail-Adresse eingegeben und direkt aufgerufen werden.

<link>

Defines the relationship between a document and an external resource (most used to link to style sheets)

<nav>

Defines navigation links


Ein zentrierter Container mit einem zentrierten Bild
So sieht´s aus


Logo


Quellcode
<html>
<head>
Hier nichts

<style type="text/css">
#s1 {background-color: lightgrey;border: 4px solid red;margin-bottom: -100px;}
#s2 {background-color: rgba(200, 200, 200, 0.8);border: 4px solid blue;}
div {position: absolute;width: 50%;height: 150px;border: 2px solid black;z-index: 0;}
#div1 {background-color: lightpink;left: 30px;top: 2em;}
#div2 {background-color: palegreen;left: 60px;top: 4em;}
</style>
</head>

<body >
<main>
<section id="s1"> Kontext 1
<div id="div1">Subkontext 1-1</div>
<div id="div2">Subkontext 1-2</div>
</section>
<section id="s2"> Kontext 2 </section>
</main>
</body>

</html>



z-index Überlagerungs­reihenfolge der HTML-Elemente
  • <integer>
  • auto
  • inherit









Kontakt    Datenschutz   Impressum