No puedo mostrar un DIV debajo del otro

acousticgerman · #1 (**permalink**) 18/01/2016, 07:33

Estimados,
Tengo un slide de imágenes en un DIV y una "Navigation bar" en otro DIV, el problema es que no puedo mostrar ambos DIV uno debajo del otro, sucede que la barra de navegación queda por detrás del slide. Este es el código CSS que armé:

.slide{

width: 90%;
margin: 2% auto;

}

.slide img{
width: 90%;

position: absolute;
}

.slide .img2, .slide .img3, .slide .img4, .slide .img5, .slide .img6, .slide .img7, .slide .img8 {
display: none;
}

figure{
margin: 0;
}

.banner {

width: 90%;

}

.navigation {

width: 90%;
margin: 2% auto;

}

y en HTML muestro todo de la siguiente manera:

<html lang="en">
<head>
<meta charset="UTF-8">
<title>NOMBRE DE LSITIO</title>
<link rel="stylesheet" href="style.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="functions.js"></script>

<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #4CAF50;
}
</style>

</head>
<body>

<div class="banner">

<div class='slide'>

<img src='images/portada1.jpg' class='img1'>

<img src='images/portada2.jpg' class='img2'>

<img src='images/portada3.jpg' class='img3'>

<img src='images/portada4.jpg' class='img4'>

<img src='images/portada5.jpg' class='img5'>

<img src='images/portada6.jpg' class='img6'>

<img src='images/portada7.jpg' class='img7'>

<img src='images/portada8.jpg' class='img8'>

</div>
</div>

<br>

<div class="navigation">

<ul>
<li><a href="#home">Nosotros</a></li>
<li><a href="#news">Filosofia</a></li>
<li><a href="#contact">Vida Sana</a></li>
<li><a href="#news">Nuestros servicios</a></li>
<li><a href="#contact">Imagenes</a></li>
<ul style="float:right;list-style-type:none;">
<li><a class="active" href="#about">Novedades</a></li>
<li><a href="#login">Contactos</a></li>
</ul>
</ul>
</div>

</body>
</html>

Espero que puedan guiarme!

g3kdigital · #2 (**permalink**) 18/01/2016, 11:21

Tienes varios problemas con el código, comenzando porque tienes una hoja de estilos, además colocas estilos en el head y otros más inline en el html. Lo recomendado es que trabajes todo el css en una hoja de estilos.

En cuanto a tu problema, tienes que declarar el nivel de la "capa" con la propiedad z-index. Puedes hacerlo así:

Código CSS:

Ver original.navigation
{
position: relative;
z-index: 2 /*o cualquier valor entero alto*/
}
 
/*o al slide*/
 
.banner
{
z-index: -1;
}

La lógica detrás de esto, es que entre más alto el valor más se sobrepone a los elementos y viceversa, teniendo en cuenta que también se le debe declarar a los elementos un position diferente al static que es el que tienen por defecto, por eso agregue el position: relative al .navigation.

Por cierto tampoco veo la necesidad de tener un div contenedor .banner y otro más .slide y mucho menos, reitero, aplicar estilos inline en el html, a menos que se apliquen dinamicamente por javascript.

Código HTML:

Ver original<ul style="float:right;list-style-type:none;"> <!--me refiero a esto-->

Espero que tengas razones para ello.