Beispiel:CSS2 z-index3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" >
<title>z-index Variationen</title>
<style>
section {
position: relative; z-index: 0; height: 200px;
}
#s1 {
background-color: lightgrey;
border: 4px solid red;
margin-bottom: -100px;
}
#s2 {
background-color: rgb(200 200 200 / 0.8);
border: thick solid blue;
}
div {
position: absolute; width: 50%; height: 150px;
border: medium solid black;
z-index: 0;
}
#div1 {
background-color: lightpink; left: 30px; top: 2em;
}
#div2 {
background-color: palegreen; left: 60px; top: 4em;
}
</style>
</head>
<body>
<h1>Geschachtelte Stapelkontexte</h1>
<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>
</body>
</html>