Im Mobile Device - Menu slided hinter dem Main Div

leverkusenerjung · #1 (**permalink**) 05.07.2015, 21:24

Hallo zusammen, ich schon wieder.

Ich habe ein Menü, das bei viewport <480px zwar hinter dem Header, aber natürlich über dem folgenden Seiteninhalt (main-div) ins Bild sliden soll.

Wenn ich dem Header z-index 99999 verpasse und dem menu z-index 1, slided es zwar im Vordergrund, allerdings auch VOR dem header.

Wenn ich dem menu z-index -1 gebe, dem Header nach wie vor 99999 und dem Main-div -999, slided das Menu HINTER dem Header (hurra!) allerdings auch hinter dem Main.

HTML-Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">



</head>

<body>

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

<header>
	<div id="brand"><h2>Simple as that</h2></div>
</header>

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

<main>
<div id="column1">Inhalt</div>
<div id="column2">Inhalt</div>
<div id="column3">Inhalt</div>
<div id="clearfix"></div>
</main>
<footer>copyright 2015 simpleasthat</footer>
</body>
</html>

Code:

@charset "utf-8";
/* CSS Document */

* {padding:0; margin:0;}

body { font-family:sans-serif; background:#F3F3F3;}

a {text-decoration:none; color: #666;}

li {list-style-type:none;}

h2 { 
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:40px;
	line-height: 50px;
}
header {
	width:100%;
	height:60px;
	margin:auto;
	background: #fff;
	border-bottom:1px solid #ccc;
	z-index:99;
}

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

nav {width:100%; text-align:center;}
nav ul {line-height:60px;}
nav li {display:inline-block;}
nav a {padding:10px; color: #ccc;}
nav a:hover {background: #ccc; color:#333; border-radius: 5px;}

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

.menu-icon {
	float:right;
	padding:10px 20px;
	background: #333;
	color:#fff;
	cursor:pointer;
	border-radius:5px;
	margin:5px 5px 0 0;	
}

#menuToggle {display:none;}

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


main {
	width:74%;
	margin:61px auto;
	padding:3%;
	background:#fff;
	z-index:-99;	
}

#column1{
	width:30%;
	float:left;
	margin:20px 4.5% 20px 0;
	background:#666;
	border:2px solid #999;
}	
#column2{
	width:30%;
	float:left;
	margin:20px 4.5% 20px 0;
	background:#666;
	border:2px solid #999;
}
#column3{
	width:30%;
	float:left;
	margin:20px 0;
	background:#666;
	border:2px solid #999;
}

#clearfix{
	height:0;
	clear:both;
	width:100%;	
}

footer{
	width:100%;
	padding:30px;
	margin:20px 0 0 0;
	background: #fff;	
	text-align:center;
	z-index:-99;
}

@media screen and (max-width: 480px) {

h2 { font-size:30px;}	

header {z-index:9999;}
#brand {
	float:left;
	margin-left:5px;
	line-height:60px;
	color: #666;
	font-size:18px;
	font-weight:bolder;	
}
	
nav li {display:block; line-height:30px;}
nav a {display:block; border-bottom:1px dotted #fff; line-height:30px;padding:0; color:#333;}	
nav a:hover {border-radius:0;}
.menu{top:-400px; height:auto; z-index:-1}

main {
	width:80%;
	margin:61px auto;
	padding:10px 5%;
	background:#fff;
	z-index:-99999;	
}

#column1{
	width:80%;
	float:none;
	margin:20px auto;
	padding:10px;
	background:#666;
	border:2px solid #999;
	border-radius:5px;
}	
#column2{
	width:80%;
	float:none;
	margin:20px auto;
	padding:10px;
	background:#666;
	border:2px solid #999;
	border-radius:5px;
}
#column3{
	width:80%;
	float:none;
	margin:20px auto;
	padding:10px;
	background:#666;
	border:2px solid #999;
	border-radius:5px;
}

#clearfix{
	height:0;
	clear:both;
	width:100%;	
}

footer{
	width:100%;
	padding:30px;
	margin:20px 0 0 0;
	background: #fff;	
	text-align:center;
	z-index:-99;
}
}


@media screen and (min-width: 481px) {
header {
	width:100%;
	height:50px;
	margin:auto;
	background: #fff;
	border-bottom:1px solid #ccc;
	z-index:99;
}

#brand {
	float:left;
	line-height:50px;
	color: #666;
	font-size:30px;
	font-weight:bolder;	
	z-index:99999;
}

nav {width:100%; text-align:right;}
nav ul {line-height:50px; padding-right:30px;}
nav li {display:inline-block;}
nav a {padding:10px; color: #333;}
nav a:hover {background: #ccc; color:#333; border-radius: 5px;}

.menu {
	width:100%;
	height:50px;
	background:none;
	position:absolute;	
	top:51px;
	transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	z-index:9999;
}

.menu-icon {
	float:right;
	padding:10px 20px;
	background: #333;
	color:#fff;
	cursor:pointer;
	border-radius:5px;
	margin:5px 5px 0 0;	
	display:none;
}	


	
}

@media screen and (min-width: 769px) {
	
header {
	width:100%;
	height:50px;
	margin:auto;
	background: #fff;
	border-bottom:1px solid #ccc;
	z-index:99;
}

#brand {
	float:left;
	line-height:50px;
	color: #666;
	font-size:30px;
	font-weight:bolder;	
	z-index:99999;
}

nav {width:100%; text-align:right;}
nav ul {line-height:50px; padding-right:30px;}
nav li {display:inline-block;}
nav a {padding:10px; color: #ccc;}
nav a:hover {background: #ccc; color:#333; border-radius: 5px;}

.menu {
	width:100%;
	height:50px;
	background:none;
	position:absolute;	
	top:0px;
	transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	z-index:9999;
}

.menu-icon {
	float:right;
	padding:10px 20px;
	background: #333;
	color:#fff;
	cursor:pointer;
	border-radius:5px;
	margin:5px 5px 0 0;	
	display:none;
}

main {
	width:74%;
	margin:61px auto;
	padding:3%;
	background:#fff;
	z-index:-99;	
}

#column1{
	width:30%;
	float:left;
	margin:20px 4.5% 20px 0;
	background:#666;
	border:2px solid #999;
}	
#column2{
	width:30%;
	float:left;
	margin:20px 4.5% 20px 0;
	background:#666;
	border:2px solid #999;
}
#column3{
	width:30%;
	float:left;
	margin:20px 0;
	background:#666;
	border:2px solid #999;
}

#clearfix{
	height:0;
	clear:both;
	width:100%;	
}

footer{
	width:100%;
	padding:30px;
	margin:20px 0 0 0;
	background: #fff;	
	text-align:center;
	z-index:-99;
}
}

Die Variante, bei der das Menu über dem Header liegt, trotz anderslautender z-index findet ihr hier:

Unbenanntes Dokument

Bin wie immer für jeden Tipp dankbar.

schatzi · #2 (**permalink**) 05.07.2015, 21:57

Hallo!

Der z-Index funktioniert nur bei positionierten Elementen!

leverkusenerjung · #3 (**permalink**) 06.07.2015, 08:01

Hallo Schatzi,

und wieder ein Fehler aus der Rubrik "DAU". Es sind immer die Kleinigkeiten, an denen es scheitert. Danke für den Hinweis.

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
Mehrere Divs in einem Layer nebeneinander zentrieren..?	michaf	CSS	14	19.08.2013 01:02
Scrollbalken unter IE verschwindet	letslounge	CSS	12	12.12.2007 19:17
problem div hinter input feld	manuel	CSS	11	06.12.2007 14:02
div Positionierung bei Browsern	Ancient	CSS	22	17.03.2005 00:49
Scrollbares Textfeld mit purem CSS	Dancer	CSS	6	24.01.2005 15:58