¿Cómo superponer un div a otro div dentro de un div contenedor?

walvaRo · #1 (**permalink**) 11/03/2013, 10:13

Hola amigos, os escribo por que ya no se como solucionar el problema que tengo.

Lo que quiero es que un div se superponga a otro div, y el borde inferior del primer div esté alineado con el borde inferior del segundo div. Estos dos divs se encuentran dentro de un div contenedor. Seguro que es algo muy facil, pero no se como puedo hacerlo.

Dejo una imágen explicativa:

Mi intención es que el div que contiene la imagen quede situado de la siguiente manera:

Este es el codigo css del div contenedor:

Código:

	#wrapper {
	width:100%;
	height:100%;
	margin:auto;
	overflow:hidden;
	background-color:transparent;
	}

Este es el código css del div menu:

Código:

	header {
	width:1200px;
	height:120px;
	margin:40px auto auto auto; /* orden: arriba derecha abajo izquierda */
	overflow:hidden;
	display:block;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	border-radius:30px;
	background-color:#ffffff;
	}

Este es el codigo css del div que contiene la imagen:

Código:

	#sliderimage {
	width:1200px;
	height:800px;
	overflow:hidden;
	border:2px #F00 double;
	z-index:2;
	background-color:transparent;
	}

Y este es el código del div sobre el que se debe superponer:

Código:

	#baseslider {
	width:1200px;
	height:640px;
	margin:21px auto 21px auto; /* orden: arriba derecha abajo izquierda */
	overflow:hidden;
	z-index:1;
	background-color:#ffffff;
	}

Si alguien me pudiese ayudar, se lo agradecería mucho. Estoy seguro de que es facilísimo, pero no he descubierto como hacer esto.

Muchísimas gracias de nuevo.

ArturoGallegos · #2 (**permalink**) 11/03/2013, 12:19

eso se hace con z-index tal cual ya lo tienes solo te falta agregarle position en cualquiera de sus posibilidades...

z-index requiere que el elemento a afectar este afectado por float o position, de lo contrario el z-index no funciona.

pitufoweb · #3 (**permalink**) 11/03/2013, 12:20

Hola,

Te falto poner el HTML

Saludos

pitufoweb · #4 (**permalink**) 11/03/2013, 12:22

Cita:

Iniciado por ArturoGallegos

z-index requiere que el elemento a afectar este afectado por float o position, de lo contrario el z-index no funciona.

z-index también funciona con float? Creí que solo funcionaba con position.

Edito: Acabo de hacer una prueba y z-index no funciona en elementos flotados.

Saludos

pzin · #5 (**permalink**) 11/03/2013, 15:21

Para aclarar: z-index requiere que el elemento no esté posicionado de forma estática.

ArturoGallegos · #6 (**permalink**) 11/03/2013, 19:02

@pitufoweb juraría que si se podía usar z-index con float, pero tienes toda la razón también acabo de probar y no se puede... tomo nota para no volver a errar aunque por alguna razón debí tener la idea que si se puede, igual voy a googlear un rato para despejar la intriga y curiosidad.

walvaRo · #7 (**permalink**) 12/03/2013, 14:13

Hola amigos. Cierto, me dejé el html. Es el siguiente código:

Código:

<!-- INICIO HEADER -->
<!DOCTYPE html><!-- html 5 -->
<html lang="es">
    <head>        
        <meta charset="utf-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0"><!-- adaptativo -->
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content="">        
        <title></title>        
        <link rel="stylesheet" type="text/css" href="style.css" media="screen">        
    </head>    
    <body>
        
        <div id="wrapper">
        
        <div id="filetetop"></div>
            <header>
            	
				<div id="logo">ZONA PARA EL LOGOTIPO</div>
                <nav id="menu">
                    <ul>
                        <li><a href="#">INICIO</a></li>
                        <li><a href="#">OPCIÓN1</a></li>
                        <li><a href="#">OPCIÓN2</a></li>
                        <li><a href="#">OPCIÓN3</a></li>
                        <li><a href="#">CONTACTO</a></li>
                    </ul>
                </nav>
            </header>
        <!-- FIN HEADER -->
        <!-- INICIO INDEX -->
        		<div id="sliderimage"><img src="images/image_prueba.png"></div>
                <div id="baseslider"></div>
                        
        <section id="wrapperlittle">        

                    <div class="item_s">
                        <div class="puntomind"></div>
                            <p class="tit_m">info</p>
                            <p class="tit_s">TEXTO DE PRUEBA</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Curabitur non mauris fermentum libero ultricies tempus.
                            Suspendisse lobortis dui nec odio feugiat sollicitudin.
                            Nam sed augue eros.
                            Curabitur luctus feugiat diam, sodales rutrum nisi dapibus at.</p>
                            <p><br><a href="#">Ver mas...</a></p>
                	</div>

                    <div class="item_s">
                        <div class="puntomind"></div>
                            <p class="tit_m">ejemplo</p>
                            <p class="tit_s">TEXTO DE PRUEBA</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Curabitur non mauris fermentum libero ultricies tempus.
                            Suspendisse lobortis dui nec odio feugiat sollicitudin.
                            Nam sed augue eros.
                            Curabitur luctus feugiat diam, sodales rutrum nisi dapibus at.</p>
                            <p><br><a href="#">Ver mas...</a></p>
                	</div>

                    <div class="item_s">
                        <div class="puntomind"></div>
                            <p class="tit_m">texto</p>
                            <p class="tit_s">TEXTO DE PRUEBA</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                            Curabitur non mauris fermentum libero ultricies tempus.
                            Suspendisse lobortis dui nec odio feugiat sollicitudin.
                            Nam sed augue eros.
                            Curabitur luctus feugiat diam, sodales rutrum nisi dapibus at.</p>
                            <p><br><a href="#">Ver mas...</a></p>
                	</div>
                    <hr class="clear">

                 </section>
        
        <!-- FIN INDEX -->
        <!-- INICIO FOOTER -->
        
            <footer>
            </footer>
        </div><!-- fin content-wrapper -->
    </body>
</html>
<!-- FIN FOOTER -->

He estado probando la propiedad top y left, pero la div #sliderimage dentro de la div #wrapper, empuja a las demás divs. Prefiero no usar position por que he leido que se puede hacer con los margin. También he visto que utilizando la div #sliderimage fuera de la div #wrapper, y utilizando position, irremediablemente, si se hace zoom o se amplía la página, la div #sliderimage tiende a quedarse fija y se descuadra del resto, ya que el resto crece en proporción ya que no tienen propiedad de position. Estoy perdido, y además ahora he visto que en internet explorer se ve todo fatalmente mal y descolocado.