img from header div不在內容div前

-1

由於標頭設計img #searchbar-container，我無法讓.content-panel和#panel-design漂浮在.content的右側。我已經嘗試使用z-index不同的值。我想雖然具有上述的div #searchbar-containerimg from header div不在內容div前

<body> 
     <div class="header"> 
      <img id="searchbar-container" src="images/searchbar1.png"> 
     </div> 
     <div class="content"> 
      <div class="sidebar"></div> 
      <div class="content-panel"> 
       <div id="panel-design"></div> 
        <!--main content here--> 
      </div> 
     </div> 
</body>

的CSS放置.content-panel和#panel-design在.content右側：

.content { 
    position: relative; 
    max-width: @width; 
    height: 768px;; 
    margin: 0 auto; 
    padding: 0; 
    } 
     .content-panel { 
     position: absolute; 
     float: right; 
     margin: 0; 
     padding: 0; 
     width: 753px; 
     height: 100%; 
     background-color: blue; 
     z-index: -2; 
    } 
    #panel-design{ 
     float: right; 
     width: 685px; 
     height: 375px; 
     background-color: red; 
     z-index: -1; 
    } 
    .sidebar{ 
     width: 285px; 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    }

不能發佈整個事情。但這是我需要實現的，基本上上面的灰色圖像是#searchbar-container，而Depp的圖片是.content-panel前面的#panel-design。

enter image description here