html - Need a header logo overlapping an image slider -

I am new to html. I am creating header with overlapped logos on an image slider. This is the method I am trying to use here:

However, I still can not overlap the logo on the slider.

HTML

  div id = "logo" & gt; & Lt; Img src = "engine1 /  
 Logo.png" /> & Lt; / Div & gt; & Lt; Div id = "content" & gt; & Lt; Div id = "wowslider-container1" & gt; & Lt; Div class = "ws_images" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; Img src = "data1 / image / 1.jpg" alt = "1" title = "1" id = "wows1_0" /> & Lt; / Li & gt; & Lt; Li & gt; & Lt; Img src = "data1 / picture / 2.jpg" alt = "2" heading = "2" id = "wows1_1" /> gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Span class = "wsl" & gt; & Lt; A href = "http://wowslider.com" & gt; Gallery Javascript & lt; / A & gt; By WOWSlider.com v5.0 & lt; / Span & gt; & Lt; Div class = "ws_shadow" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;  

css

  # wowslider-container1 {zoom: 1; Status: Relative; Max-width: 940px; Margin: 0 pixel auto pixel; Z-index: 90; Border: None; Text-align: left; / * Reset alignment = center * / font-size: 10px; } #Wowslider-container1 .ws_images ul {status: relative; Width: 10000%; Height: auto; Left: 0; List-style: none; Margin: 0; Padding: 0; Border-distance: 0; Overflow: visible; / * Table-layout: fixed; * /} #html, body {width: 940px; Margins: Auto; } #lollow {position: absolute; // replace logo with natural layout: 75px; Top: 0 pixels; Width: 150px; Height: 150px; Z-index: 2; } # Content {margin-top: 100px; // Provide Buffer for Logo}  

Your z-index is very low Slide already uses z-index.

Try:

  #logo {position: absolute; // replace logo with natural layout: 75px; Top: 0 pixels; Width: 150px; Height: 150px; Z-index: 5000; }