Div sobre otros div, y no debajo.

[kapi2454]

Hola Gente, espero se encuentren bien. Necesito ayuda con algo que me tiene enfermo, creí entender como funcionaba position: y display: pero veo que no.

Trato de explicar y mostrar el código.

Código:

<style>
.titulo   {position:relative; top:0; left:0;}
.titulo p{position:absolute; top:50%; margin:auto;}

.slider        {position:relative; top:0; left:0;}
.slider img {position:absolute; top:50%; margin:auto; display:inline-block;}

.pie   {position:relative; top:0; left:0;}
.pie p{position:absolute; top:50%; margin:auto;}

</style>



<div class="titulo">
      <p>TITULO con Telefonos</p>
</div>

<div class="slider">
      <img src="img1.jpg" style="left:0;">
      <img src="img2.jpg" style="left:100%;" >
      <img src="img3.jpg" style="left:-100%;">
</div>

<div class="pie">
     <p>Escribo un poco del rubro</p>
</div>

Bueno eso sería el código resumido, el tema es que si pongo que la imagen tiene position:absolute, el pie se me pega al div "titulo", y no debajo del slider. No se por que. Probé pegar por todos lados display:block; y no le da pelota.
Mi idea es con jquery cambiar la propiedad "left" y así ir pasando de imagen en imagen. Algo simple.

Que estoy haciendo mal y por que un div queda arriba de otro?

Al colocar cada div como contenedor con la propiedad position:relative;, no deberían de quedarse uno debajo del otro?

Gracias gente!!

[pzin]

Yo creo que no entiendes bien cómo funcionan las diferentes opciones de posicionamiento.

A ver si esto te sirve. (tarda un poco en cargar)

Otra fuente buena, probablemente mejor, es librosweb: http://librosweb.es/libro/css/capitu...onamiento.html

En cualquier caso, para hacer lo que quieres hacer no te hace falta posición absoluta ninguna. Puedes usar posiciones relativas, que es mejor, para que no se te desmonte todo, ya que en una posición absoluta sacas a los elementos del flujo natural del documento.