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