1

<!DOCTYPE html>
<html>
	<head>
		<title>
			Pagina de ejemplo
		</title>
		<link type="text/css" rel="stylesheet" href="style.css">
	</head>
	<body>
		<div class="cabecera">
		<p class="titulo" id="inicio"></p>
		<p class="inicio"></p>
		</div>
		<div class="menu">
		<ul>
		<li><a href="#inicio" class="enlace">Inicio</a></li>
		<li><a href="#contacto" class="enlace">Contacto</a></li>
		<li><a href="#articulos" class="enlace">Articulos</a></li>
		</ul>
		</div>
		<div  class="articulos" id="articulos">
		
		</div>
		<div class="contacto" id="contacto">
		<p>Contacto</p>
			<form class="formulario" action="mailto:tarea2@foc.es" method="post" enctype="text/plain">
				<label for="nombre">Nombre:</label> 
				<input type="text" name="nombre"> <br/>
				<label for="apellidos">Apellidos:</label> 
				<input type="text" name="apellidos"> <br/>
				<label for="email">email:</label> 
				<input type="email" name="email"> <br/>
				<label for="mensaje">Mensaje:</label> 
				<textarea class="textarea" placeholder="Escriba su mensaje..."></textarea> </br>
				<input type="submit" value="Enviar">
			</form>
		</div>
		<div class="pie">
		</div>
	</body>
</html>

Buenas, resulta que maquetando una pagina, quiero dejar el menu arriba fijo, en la hoja de estilos es un position Fixed, abajo tengo como una descripcion, y abajo unos articulos. Los dos los tengo en position absolute. Al bajar el scroll, el menu queda fijo, con la descripcion no pasa nada, pero al llegar a los articulos, este lo tapa. Os paso el codigo:

.menu {
    position:fixed;
    top:0;
    height:10%;
    right:0;
    left:0;
    bottom:auto;
    background-color:yellow;
    visibility:visible;
}
.menu ul {
    list-style: none;
    height: 100%;
    margin: 0;
    padding: 0;
}

.menu ul li {
  float:left; 
  width: 33%;
  height: 100%;
  text-align:center;
  margin:20px 0px 0px 0px;
}
.cabecera {
    position: absolute;
    width:100%;
    height:20%;
    right: 0;
    top:10%;
    left: 0;
    bottom: auto;
    background-color:green;
    text-align:center;
}
.articulos{
    position:absolute;
    width:100%;
    height:80%;
    right: 0;
    top:30%;
    left: 0;
    bottom: auto;
    background-color:gray;
    text-align:center;
}
img {
    width:400px;
    height:220px;
    border-radius:25px;
}
.coche1{
    position:absolute;
    left:10%;
}
.coche2{
    position:absolute;
    right:10%;
}
.coche3{
    position:absolute;
    left:10%;
    top:300%;
}
.coche4{
    position:absolute;
    right:10%;
    top:300%;
}
.pie {
    height:700px;
    bottom:0;
}
1
  • En cuestión de diseño, siempre provee también el HTML. Edita tu pregunta y añádelo.
    – gugadev
    el 12 ene. 2017 a las 19:07

1 respuesta 1

0

Coloca la propiedad z-index al div fixed, tal que así:

.menu {
    position:fixed;
    top:0;
    height:10%;
    right:0;
    left:0;
    bottom:auto;
    background-color:yellow;
    visibility:visible;
    z-index: 999;

}

Si ves que sigue sucediendo, añade a los divs absolute un z-index inferior.

2
  • Si, me funciono, muchas gracias XD el 12 ene. 2017 a las 19:16
  • De nada @BorjaCámara, marca mi mensaje como respuesta de tu duda. Gracias.
    – PlayerWet
    el 12 ene. 2017 a las 19:20

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.