Question

我需要帮助解决这个问题。我有一个带有导航栏的索引页面和一个由div包装的iframe。我必须为iframe的包装器设置一个-1 z-index值，因此可以正确显示nabvar。但是，这不允许我与iframe交互（例如，我不能使用滑块）。我怎样才能解决这个问题？提前致谢！：d

屏幕截图（你需要这个，因为你没有看到页面所需的所有文件）：

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;
}

Answer 1

你无法与它互动，你已经把它放在一切。请尝试在导航栏中添加正z-index。

z-index不允许我与后面的内容进行交互

1 个答案: