html - Divs don't merge -

i have layout:

i trying make div slideshow, above red thing, above section of header.

i tried z-index, , lot of other ways, cannot layout work.

this code:`

<div id="box">     <div class="clear"></div>     <div id="slideshow">         <ul>             <li>                 <img src="imagens/1.png" alt="curso 1" class="banner" />             </li>             <li>                 <img src="imagens/2.png" alt="curso 2" class="banner" />             </li>             <li>                 <img src="imagens/3.png" alt="curso 3" class="banner" />             </li>             <li>                 <img src="imagens/4.png" alt="curso 4" class="banner" />             </li>         </ul>     </div>     <div class="clear"></div>     <div id="header">         <div id="logo">             <a href="#"><img src="imagens/logo.png" id="" /></a>         </div><!--logo-->         <div id="menu">             <ul>                 <a class=""><li>home</li></a>                 <a class=""><li>programaÇÃo</li></a>                 <a class=""><li>palestrantes</li></a>             </ul>         </div>     </div><!--header--> </div> 

and css:

.clear {     clear: both; } #box {     width:980px;     margin: 0 auto;     background-color:red; } #header {     z-index: 3; } #slideshow {     height:286px;     width:980px;     z-index: 0;     float: right; } #slideshow ul {     list-style: none; } #slideshow img {     overflow: hidden;     height:286px;     width:980px; } 

what can solve this?

i'm trying this:

i think "merge" mean overlap.

to make logo , navigation (#header) overlap slideshow (#slideshow) above it, need put negative top margin on #header. need add position element in order z-index work.

#header {   position:relative;   z-index: 3;   margin-top:-200px; } 

once this, may need increase z-index property of #header in order overlap slideshow.