[SOLUCIONADO] Superposición invadiendo otro div

PedroDesing · #1 (**permalink**) 07/10/2015, 07:58

Buenas,

Quiero hacer este efecto

Estoy jugando con position y z-index, pero no lo consigo. le he puesto un position:relative al div contenido y un position:absolute a la imagen. Luego he usado right:20px; y top:-25px para intentar que la imagen suba, pero me queda así:

He usado z-index de varias formas pero no lo he conseguido.

Alguna idea? Si es necesario, os paso el codigo que he usado.

AngelKrak · #2 (**permalink**) 07/10/2015, 09:17

prueba a poner un z-index: 10; a la imagen y un z-index: -10; al header y cuentame si funciona ;) si no sube tu codigo a codepen y pasalo ;)

PedroDesing · #3 (**permalink**) 07/10/2015, 09:33

Muchas gracias por responder. Ya había probado algo así.

Voy a simplificar el código y a subirlo ;)

PedroDesing · #4 (**permalink**) 07/10/2015, 09:43

Con el codigo que paso aqui, la parte alta del minion desaparece como resultado de usar el top:-50px; en lugar de superponerse al div de arriba, que es lo que a mi me interesa.

el HTML

Código HTML:

<!DOCTYPE html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Prueba</title>

	<link rel="stylesheet" href="css/style.css">

</head>
<body>
  <!-- Header -->
  <header>

  </header>
  <!-- Separator Image -->
  <div class="separator-image"></div>
  <!-- Container -->
  <div class="wrapper clearfix">
    <section>
      <!-- minion -->
      <img src="img/minion.png" class="minion" alt="minion">
    </section>
    <!-- Aside -->
    <aside>

    </aside>
  </div>
  <!-- Footer -->
  <footer>

  </footer>

</body>

y el CSS

Código HTML:

*{
margin:0;
padding:0;
outline:0;
border:0;
}
html{
font-size:16px;	
font-family:Helvetica, Arial, sans-serif;
}
.clearfix{
height:1%;
overflow:auto;	
}

body{
border-top:5px solid #ed5900;	
}
header{
background:#f0f0f0;
margin:0 auto;
max-width:1160px;
height:60px;
width:100%;	
}
div.separator-image{
background:url(../img/separator-image.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:145px;
margin-top:48px;
z-index:-10;
}
div.wrapper{
/*background:#f63;*/
margin:0 auto;
max-width:1160px;
width:100%;
}
	section{
	background:#f63;
	float:left;
	position:relative;
	width:70%;
	height:450px;	
	}
		img.minion{
		position:absolute;
		right:20px;
		top:-50px;
		z-index: 10;}
	aside{
	background:#363;
	float:right;
	width:26%;
	height:450px;
	}

footer{
background:#454545;
height:160px;
margin-top:80px;
width:100%;
}

PedroDesing · #5 (**permalink**) 13/10/2015, 03:03

Me faltaba un position:relative en wrapper.