Probleme mit z-index

leverkusenerjung · #1 (**permalink**) 06.12.2015, 11:48

Hallo und einen schönen Nikolaustag.

Ich versuche gerade, ein Layout mit Slide-down Menu zu erstellen.

Dabei soll die Menuleiste bei Clicken des Menü-Icons HINTER dem Header,
aber natürlich VOR dem Main sliden.

Entsprechend hat der header den höchsten z-index, das Menu -1 und Main -99.

Damit sollte doch dann gewährleistet sein, dass alles so funktioniert wie gewünscht.
Klappt aber nicht, da sich das Menu immer hinter dem Main versteckt.

Wenn ich dem Menu z-index:1 gebe (also immer noch niedriger als dem Header), slided es VOR dem header runter. Das kann ich irgendwie nicht nachvollziehen.

Jemand einen Tipp für mich'?

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>IRGENDEIN TITEL</title>
<style type="text/css">

*{padding:0; margin:0;}
body {font-family:sans-serif; background:#EAFFEF;}
a {text-decoration:none; color:#333;}
li {list-style-type:none;}

header{
	width:100%;
	height:150px;
	margin:auto;
	border-bottom: 3px solid #fff;
	background:url(img/bg_header.png) no-repeat;
	z-index:99;
}

#brand{
	float:left;
	line-height:50px;
	color:#ccc;
	font-size:30px;
	font-weight:bolder	
}

nav{
	width:100%;
	text-align:center;	
}

nav ul{	line-height:50px;}
nav li{	display:inline-block;}
nav a{padding: 10px;}
nav a:hover {background:#000; color:#ccc;}

.menu{
	width:100%;
	height:50px;
	background: #7f8000;
	position: absolute;
	top: -153px;
	transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;	
	-ms-transition: all .5s ease-in-out;	
	-o-transition: all .5s ease-in-out;
	z-index:-1;
}

.menu-icon{
	float:right;
	padding:10px 20px;
	background-color:#7f8000;
	color:#fff;
	font-weight:bolder;
	cursor:pointer;
	border-radius:5px;
	border:2px solid #fff;
	margin:50px 40px 0 0;	
}

#menuToggle{display:none;}

#menuToggle:checked ~ .menu {position:absolute; top:153px;}


main{
	width:70%;
	background:#fff;
	margin:0 auto;
	padding: 60px 20px 30px 20px;
	border-left:1px solid #7f8000;
	border-right:1px solid #7f8000;
	z-index:-99;	
}
</style>
</head>

<body>

<input type="checkbox" id="menuToggle">
<label for="menuToggle" class="menu-icon">Menü</label>

<header>
<div id="brand"><img src="img/logo.png" width="100%"></div>
</header>

<nav class="menu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>

<main>
main
</main>


</body>
</html>

MrMurphy · #2 (**permalink**) 07.12.2015, 01:04

Hallo

position und z-index sind ein Thema für sich. Ich habe noch kein Buch und keine Anleitung gefunden, in denen das Zusammenspiel richtig beschrieben wurde.

Eine Anleitung würde den Rahmen des Forums sprengen. Deshalb eine kurze Beschreibung. Für z-index reichen kleine Zahlen. Wenn die nicht funktionieren helfen größere auch nicht.

Die CSS-Anweisung position kennt vier Zustände

static
relative
absolute
fixed

static ist die Standardvorgabe.

Wenn Elemente positioniert sind ist damit gemeint, dass sie nicht den Zustand static haben.

z-index wirkt nur auf Elemente, die positioniert sind, also

relative
absolute
fixed

Um eine Reihenfolge wie von dir gewünscht zu erhalten müssen demnach header und nav positioniert werden. Zum Beispiel header mit relative und nav mit absolute

header bekommt dann den z-index 2 und nav den z-index 1. So steht header vor nav und beide stehen vor main. Also genau das, was du erreichen willst.

Ich habe dafür mal ein Beispiel erstellt um zu zeigen dass das auch so funktioniert.

Für position und z-index sind die drei untersten Einträge im CSS-Teil zuständig. Die Überschrift mit den drei Farben dient dazu die Container auch zu erkennen, wenn die Schrift mit der Bezeichnung grade mal verdeckt ist. Aus dem gleichen Gund sind die Container auch untereinander seitlich etwas verschoben. So kann am besten getestet werden.

HTML-Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Z-Index 02</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <style>

   /*Meine persönlichen Grundeinstellungen für alle Seiten*/
   @import url(http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css);
   @media all {
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-family: Sans-Serif;
         font-size: 120%; /*für die Einheit rem, mit der ich gerne arbeite*/
      }
      body {
         margin: 0;
         position: relative;
         width: 50rem;
         margin: 1rem auto;
      }
      h2 {
         font-size: 3rem;
         padding: 1rem 1rem 3rem 1rem;
         margin: 0;
      }
      section :nth-child(2) h2 {
         font-size: 3rem;
         padding: 1rem 1rem 1rem 1rem;
         margin: 0;
      }
      aside {
         border: 2px solid silver;
         display: flex;
         justify-content: space-around;
      }
      aside>* {
         text-align: center;
         padding: 1rem;
         margin: 0;
         flex: 1 1 1%;
      }
      aside :nth-child(1) {
         background-color: red;
      }
      aside :nth-child(2) {
         background-color: blue;
      }
      aside :nth-child(3) {
         background-color: yellow;
      }
      section {
         position: relative;
         border: 2px solid silver;
      }
      section>* {
         width: 30rem;
      }
      header {
         background-color: red;
         margin-left: 3rem;
      }
      nav {
         background-color: blue;
         margin-left: 6rem;
      }
      main {
         background-color: yellow;
         margin-left: 9rem;
      }
   }

   /* ==================================================== */
   /* ***Ab hier beginnen die Angaben zur Problemlösung*** */

   @media all {
      header {
         /*position: static;*/
         position: relative;
         /*position: absolute;*/
         /*position: fixed;*/
         z-index: 2;
      }
      .menu {
         /*position: static;*/
         /*position: relative;*/
         position: absolute;
         /*position: fixed;*/
         z-index: 1;
         top: -12rem;
         transition: all 2s ease-in-out;

      }
      main {
         /*background-color: transparent;*/
         /*position: static;*/
         /*position: relative;*/
          /*position: absolute;*/
         /*position: fixed;*/
         /*top: 2rem;*/
         /*z-index: -5;*/
      }

      #menuToggle {
         /*display: none;*/
      }
      #menuToggle:checked ~ * .menu {
         top: 3.5rem;
      }
   }

   /* ***       Ende der Angaben zur Problemlösung***       */
   /* ===================================================== */

   </style>
</head>
<body>
   <label for="menuToggle" class="menu-icon">Menü</label>
   <input id="menuToggle" type="checkbox">
   <aside>
      <p>header</p>
      <p>nav</p>
      <p>main</p>
   </aside>
   <section>
      <header>
         <h2>header</h2>
      </header>
      <nav class="menu">
         <h2>nav</h2>
      </nav>
      <main>
         <h2>main</h2>
      </main>
   </section>
</body>
</html>

Ich hoffe dir damit weiterhelfen zu können.

Gruss

MrMurphy

MrMurphy · #3 (**permalink**) 07.12.2015, 02:05

Hallo,

ich habe deine Seite mal so umgebaut, dass sie wie von dir gewünscht funktioniert.

Zusätzlich zu meiner Testseite musste ich noch den Menu-Button positionieren, da er sich im Bereich der drei betroffenen Boxen befindet.

HTML-Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Z-Index 00b</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<style>
   * {
      padding: 0;
      margin: 0;
   }
   body {
      font-family: sans-serif;
      background: #EAFFEF;
   }
   a {
      text-decoration: none;
      color: #333;
   }
   li {
      list-style-type: none;
   }
   header {
      width: 100%;
      height: 150px;
      margin: auto;
      border-bottom: 3px solid #fff;
      position: relative;
      background-color: yellow;
      z-index: 2;
   }
   #brand {
      float: left;
      line-height: 50px;
      color: #ccc;
      font-size: 30px;
      font-weight: bolder;
   }
   nav {
      width: 100%;
      text-align: center;
   }
   nav ul {
      line-height: 50px;
   }
   nav li {
      display: inline-block;
   }
   nav a {
      padding: 10px;
   }
   nav a:hover {
      background: #000;
      color: #ccc;
   }
   .menu {
      width: 100%;
      height: 50px;
      background: #7f8000;
      top: -153px;
      transition: all .5s ease-in-out;
      position: absolute;
      z-index: 1;
   }
   .menu-icon {
      float: right;
      padding: 10px 20px;
      background-color: #7f8000;
      color: #fff;
      font-weight: bolder;
      cursor: pointer;
      border-radius: 5px;
      border: 2px solid #fff;
      margin: 50px 40px 0 0;
      position: relative;
      z-index: 3;
   }
   #menuToggle {
      display: none;
   }
   #menuToggle:checked ~ .menu {
      top: 153px;
   }
   main {
      width: 70%;
      background: #fff;
      margin: 0 auto;
      padding: 60px 20px 30px 20px;
      border-left: 1px solid #7f8000;
      border-right: 1px solid #7f8000;
   }
</style>
</head>
<body>
   <label for="menuToggle" class="menu-icon">Menü</label>
   <input type="checkbox" id="menuToggle">
   <header>
      <div id="brand"><img src="img/logo.png" width="100%"></div>
   </header>
   <nav class="menu">
      <ul>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
         <li><a href="#">Link</a></li>
      </ul>
   </nav>
   <main>
      <h2>main</h2>
   </main>
</body>
</html>

Gruss

MrMurphy

leverkusenerjung · #4 (**permalink**) 07.12.2015, 15:35

Ach ja...z-index nur mit Positionierung

...jetzt fällt es mir wie Schuppen aus den Haaren.

Danke für die Mühe und danke für die Hilfe.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
paar Probleme mit dem CSS Layout	SimonK.	CSS	6	05.10.2008 14:57
Probleme mit dem Border im IE6	bullseye	CSS	9	30.10.2007 16:21
probleme mit float:left und listenhintergrund im IE6	Eppi	CSS	2	04.12.2006 13:10
IE: Probleme mit ul-Menü	Ares	CSS	4	18.10.2006 11:42