Beispiel:CSS2 z-index2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>z-index im eigenen Stapelkontext</title>
<style>
main {
height: 32em;
}
#demo, #vergleich {
display: inline-block;
position: relative;
width: 40%;
margin: 2%;
min-width: 400px;
min-height: 100%;
}
ul {
position: absolute;
top: 5em;
left: 2em;
background: rgba(193, 168, 134, .6);
border-radius: 1em;
padding: 2em;
width: 23em;
height: 15em;
list-style: none inside none;
}
li {
position: absolute;
padding: 1em;
width: 10em;
height: 5.5em;
border: 2px solid #45874B;
border-radius: .5em;
background: rgba(133, 192, 138, .8);
}
li:nth-child(1) { top: 1em; left: 3em; }
li:nth-child(2) { top: 3em; left: 4.5em; }
li:nth-child(3) { top: 5em; left: 6em; }
li:nth-child(4) { top: 7em; left: 7.5em; }
li:nth-child(5) { top: 9em; left: 9em; }
aside {
position: absolute;
background: rgba(135, 69, 125, .7);
padding: 1em;
border-radius: 1em;
height: 20em;
width: 50%;
line-height: 4em;
}
aside:last-of-type {
top: 8em; right: 0;
text-align: right;
line-height: 38em;
}
ul:after {
content: "Liste mit z-index: auto";
display: block;
height: 15em;
line-height: 28em;
text-align: right;
}
#demo ul:after {
content: "Liste mit z-index: 40";
}
</style>
</head>
<body>
<h1><code>z-index</code> im eigenen Stapelkontext</h1>
<main>
<section id="demo">
<h2>z-index</h2>
<aside style="z-index: 50">Element mit z-index: 50</aside>
<ul style="z-index: 40">
<li>z-index: auto</li>
<li style="z-index: 80">z-index: 80</li>
<li>z-index: auto</li>
<li>z-index: auto</li>
<li style="z-index: 10">z-index: 10</li>
</ul>
<aside style="z-index: 30">Element mit z-index: 30</aside>
</section>
<section id="vergleich">
<h2>ohne z-index</h2>
<aside>z-index: auto;</aside>
<ul>
<li>z-index: auto</li>
<li>z-index: auto</li>
<li>z-index: auto</li>
<li>z-index: auto</li>
<li>z-index: auto</li>
</ul>
<aside>z-index: auto;</aside>
</section>
</main>
</body>
</html>
