[SOLUCIONADO] Problema posicion banner

[nitro88]

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

[pzin]

Usa z-index.

Código CSS:

#banner {
  z-index: 100;
}