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