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%;
}