Tengo problema de posicion y esque se me muestra el banner por delante del header y quiero que se muestre atras
HTML Código HTML:
<div id="banner">
</div>
<!--CABEZERA-->
<div id="principal" itempscope itemtype="http://www.data-vocabulary.org/person">
<header>
<div id="logo">
<img src="img/Starbucks.jpg" width="50px" height="50px" alt=""/>
</div>
<h1><span itemprop="name"> Blog personal</span></h1>
<h2><span itemprop="title">Creacion 3d</span></h2>
<nav>
<ul>
<li><img src="img/13457785-icono-de-noticias.jpg" width="50" height="50" alt=""/><a href="index.html">Inicio</a></li>
<li><img src="img/9909802-icono-de-inicio.jpg" width="50" height="50" alt=""/><a href="noticias.html">Noticias</a></li>
<li><img src="img/2658.png" width="50" height="50" alt=""/><a href="sobremi.html">Sobre mi</a></li>
<li><img src="img/descarga.jpg" width="50" height="50" alt=""/><a href="contacto.html">Contacto</a></li>
</ul>
</nav>
</header> CSS Código HTML:
#principal{
text-align: left;
margin:auto;
background: gray;
width:80%;
height:100%
position: relative;
}
#banner{
width: 100%;
height: 100px;
position: absolute;
background: darkgray;
}
header{
display:table;
margin: auto;
text-align:left;
width:100%;
height:100px;
background: darkgray;
border: 2px solid white;
}