z-index不允許我與後面的內容交互

我需要幫助這個CSS問題。我有一個帶有導航欄的索引頁和一個由div包裹的iframe。我不得不爲iframe的包裝器設置-1 z-index值，所以nabvar可以正確顯示。但是，這不會讓我與iframe交互（例如，我無法使用滑塊）。我怎樣才能解決這個問題？提前致謝！：dz-index不允許我與後面的內容交互

截圖（U將需要這個，因爲你不擁有你所需要看到的網頁文件）：

http://i.imgur.com/ckqsGEC.png

HTML：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!-- Versión HTML--> 
<html> 

<head> 

<title>DiverCine...</title>                      <!-- Título de la Página--> 

<link href="favicon.png" rel="shortcut icon" /> <!-- Icono de la Página--> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />         <!-- Permite los caracteres especiales, como Ñ o las tildes--> 

<link href="index.css" rel="stylesheet" type="text/css">            <!-- Ancla la hoja de estilos del index--> 

</head> 

<body> 

<div id="top">                       <!-- Envuelve la cabecera--> 
<div id="logo"><img src="logo.png" title="Divercine..." alt="Divercine..." border="0" /></div>    <!-- Acá va la imagen del logo, envuelta en una capa--> 
<div id="login"> 
<form action="" method="post">               <!-- Se declara un formulario, para organizarlo mejor se divide en 3 capas--> 
<div id="formleft">                  <!-- Capa de Formulario superior izquierda, contiene a las etiquetas--> 
E-mail:<br> 
Contraseña: 
</div> 
<div id="formright">                   <!-- Capa de Formulario superior derecha, contiene a las cajas de texto--> 
<input type="text" name="email" size="20"><br>               <!-- Textfield tipo Texto--> 
<input type="password" name="password" size="20">              <!-- Textfield tipo Contraseña--> 
</div> 
<div id="formfoot">                   <!-- Capa de Formulario inferior, contiene un checkbox, un botón y links--> 
<input type="checkbox" name="recordarc"> Recordar Contraseña <input type="submit" value="Iniciar"><br> 
<a href="#" title="¿Olvidaste tu contraseña?">¿Olvidaste tu contraseña?</a> &#124; <a href="#" title="Registrarse">Registrarse</a> 
</div> 
</form> 
</div> 
</div> 

<a href="#"><img id="fb" src="fbicon10.png" alt="Síguenos en Facebook!" title="Síguenos en Facebook!" /></a>   <!-- Botón de Facebook--> 

<div id="otro_contenedor_xd">        <!-- Capa envolvente del menu y su borde superior--> 
<div id="barra_por_las_puras"></div>      <!-- Capa que de color blanco que sirve de border superior al menu--> 

<div id="menu_groso">          <!-- Capa envolvente del menu--> 
<ul>              <!-- Lista, que con CSS es transformada en una navbar--> 
<li><a href="#" id="bleft">inicio</a></li> 
<li><a href="#">cartelera</a></li> 
<li><a href="#">nuestros cines</a></li> 
<li><a href="#">próximos estrenos</a></li> 
<li><a href="#">promociones</a></li> 
<li><a href="#" id="bright">compra online</a></li> 
</ul> 
</div> 
</div> 

<div id="middle">           <!-- Capa que envuele al iframe, donde cargarán todas las demás páginas-->                






<iframe src="Slider/slider.html" name="middle_target" id="middle_iframe"></iframe> 
<!-- Este iframe llama inicialmente al slider de otra página HTML--> 
</div> 

<div id="footer">           <!-- Copyright--> 
<div id="copyright">Copyright © Cristian Lavado Briceño, Ruben Pacheco Guevara, Agustin Rodas Linares</div> 
</div> 

</body> 

</html>

CSS：

html { 
height:100%; 
} 

body {   /* Le da un fondo degradado rojo al body, define la fuente de la página */ 
height:100%; 
margin:0; 
border:0; 
background:-webkit-linear-gradient(left, #a60000, #ff2727, #a60000); 
background:-o-linear-gradient(right, #a60000, #ff2727, #a60000); 
background:-moz-linear-gradient(right, #a60000, #ff2727, #a60000); 
background:linear-gradient(to right, #a60000, #ff2727, #a60000); 
font-family:"Trebuchet MS", Helvetica, sans-serif; 
font-size:100%; 
overflow-x:hidden; 
} 

#top {   
position:absolute; 
width:100%; 
height:30%; 
top:0; 
left:0; 
right:0; 
background-color:#000000; 
} 

#logo { 
position:absolute; 
top:0; 
left:0; 
width:70%; 
height:100%; 
} 

#logo img { 
position:absolute; 
left:0; 
right:0; 
top:0; 
bottom:0; 
height:80%; 
width:auto; 
display:inline; 
margin:auto; 
} 

#login { 
position:absolute; 
top:0; 
left:70%; 
width:30%; 
height:100%; 
color:#ffffff; 
-webkit-transition:background-color 0.5s; 
-moz-transition:background-color 0.5s; 
-o-transition:background-color 0.5s; 
transition:background-color 0.5s; 
} 

#login:hover { 
background-color:#121212; 
} 

form { 
position:absolute; 
width:100%; 
height:100%; 
} 

#formleft { 
position:absolute; 
top:20%; 
left:0; 
width:42.5%; 
height:30%; 
text-align:right; 
padding-right:4px; 
line-height:150%; 
} 

#formright { 
position:absolute; 
top:20%; 
left:42.5%; 
width:57.5%; 
height:30%; 
text-align:left; 
padding-left:4px; 
} 

input:nth-child(1) { 
margin-bottom:5px; 
} 

#formfoot { 
position:absolute; 
top:50%; 
left:0; 
width:100%; 
height:30%; 
text-align:center; 
} 

#formfoot a { 
color:#ff0000; 
} 

#formfoot a:hover { 
color:#ffffff; 
} 

#fb { 
position:absolute; 
width:25px; 
height:25px; 
left:0; 
bottom:70%; 
border-top:#ffffff 10px solid; 
border-right:#ffffff 10px solid; 
-webkit-border-radius:0px 20px 0px 0px; 
-moz-border-radius:0px 20px 0px 0px; 
border-radius:0px 20px 0px 0px; 
} 

#otro_contenedor_xd { 
position:absolute; 
top:30%; 
left:0; 
width:100%; 
} 

#barra_por_las_puras { 
position:absolute; 
top:0; 
left:0; 
width:100%; 
height:10px; 
background-color:#ffffff; 
} 

#menu_groso { 
width:100%; 
position:absolute; 
top:10px; 
text-align:center; 
} 

ul { 
list-style-type:none; 
display:inline-block; 
margin:0; 
padding:0; 
overflow:hidden; 
} 

li { 
float:left; 
} 

li a:link, li a:visited { 
display:block; 
width:auto; 
font-weight:bold; 
color:#ffffff; 
background-color:#ff0000; 
text-align:center; 
padding:4px 8px; 
text-decoration:none; 
text-transform:uppercase; 
font-size:1.2em; 
} 

li a { 
border-bottom:#ffffff 10px solid; 
-webkit-transition: border-top 0.25s, background-color 0.25s; 
transition: border-top 0.25s, background-color 0.25s; 
transition-timing-function:linear; 
-webkit-transition-timing-function:linear; 
} 

#bleft { 
border-left:#ffffff 10px solid; 
-webkit-border-radius:0px 0px 0px 20px; 
-moz-border-radius:0px 0px 0px 20px; 
border-radius:0px 0px 0px 20px; 
} 

#bright { 
border-right:#ffffff 10px solid; 
-webkit-border-radius:0px 0px 20px; 
-moz-border-radius:0px 0px 20px; 
border-radius:0px 0px 20px; 
} 

li a:hover { 
border-top:#000000 7.5px solid; 
background-color:#ff4646; 
} 

#middle { 
position:absolute; 
top:30%; 
left:0; 
right:0; 
height:65%; 
z-index:-1; 
} 

#middle_iframe { 
width:100%; 
height:100%; 
} 

#footer { 
position:absolute; 
width:100%; 
height:5%; 
bottom:0; 
left:0; 
background-color:#000000; 
color:#ffffff; 
border-top:#ffffff 10px solid; 
display:table; 
} 

#copyright { 
position:relative; 
text-align:center; 
display:table-cell; 
vertical-align:middle; 
}

來源

2014-06-24 mgblc

'z-index'控制元素的堆疊級別。除非您移動/移除覆蓋元素，否則您將永遠無法與元素進行交互，除非您移動/移除覆蓋元素。 – TylerH

你不能與它互動，你已經把它放在一切後面。嘗試添加一個積極的Z-索引，而不是你的導航欄。

來源

2014-06-24 17:45:14 Mark

謝謝！ asdasdasd – mgblc

z-index不允許我與後面的內容交互

回答

相關問題