0

I am new to html. I'm making a header with a logo overlapped on an image slider. This is the way i tried by using the method here: How would you make two <div>s overlap?

However, I still cannot get the logo overlapped on the slider.

Here's the link of how it looks now: http://homebeta.site90.com/

HTML

div id="logo"><img src="engine1/logo.png" /></div>
<div id="content"> <div id="wowslider-container1">
<div class="ws_images"><ul>
<li><img src="data1/images/1.jpg" alt="1" title="1" id="wows1_0"/></li>
<li><img src="data1/images/2.jpg" alt="2" title="2" id="wows1_1"/></li>
</ul></div>
<span class="wsl"><a href="http://wowslider.com">Gallery Javascript</a> by WOWSlider.com    v5.0</span>
<div class="ws_shadow"></div>
</div></div></div>

CSS

#wowslider-container1 { 
zoom: 1; 
position: relative; 
max-width:940px;
margin:0px auto 0px;
z-index:90;
border:none;
text-align:left; /* reset align=center */
font-size: 10px;
}

#wowslider-container1 .ws_images ul{
position:relative;
width: 10000%; 
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}

#html, body {
width: 940px;
margin: auto;
}

#logo {
position: absolute; // reposition logo from the natural layout
left: 75px;
top: 0px;
width: 150px;
height: 150px;
z-index: 2;
}

#content {
margin-top: 100px; // provide buffer for logo
}
Community
  • 1
  • 1
user3327911
  • 1
  • 1
  • hey just increase the value of z-index in #logo like - #logo {position: absolute; left: 75px; top: 0px; width: 150px; height: 150px; z-index:9999} – Rohit Suthar Feb 19 '14 at 12:56

4 Answers4

1

your z-index is too low. your slide already use z-index.

try:

#logo {
position: absolute; // reposition logo from the natural layout
left: 75px;
top: 0px;
width: 150px;
height: 150px;
z-index: 5000;
}
Alvaro Menéndez
  • 8,766
  • 3
  • 37
  • 57
  • and btw. inpecting an element in chrome can help you greetly. As long as you inspect your slide you can see "z-index:10" so easy to find and solve problems. – Alvaro Menéndez Feb 19 '14 at 12:47
0

Might be a problem with a slider script: it could add it's own z-index for the images inside. Adding z-index: 91; (or more) to #logo must solve the problem.

Mihey Egoroff
  • 1,542
  • 14
  • 23
0

Since your Logo has a z-index of 2 you merely need to reset the z-index of the #content div

#content {
margin-top: 100px;
position: relative; /* required */
z-index: 1; /* lower than z-index of logo */
}
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
0

Just tried and tested this in chrome, FF and IE seems to work now 

z-index: 90;
`
OHH-MYSTA-CODE
  • 3
  • 3