Positioning layers on image

Presently I have a scrolling banner, using css and jquery. I'm having a problem with the 3rd - top layer display in the correct position.

1st layer - bottom layer is a scolling image - using a jquery plugin.
2nd layer - middle layer is a menu bar at the bottom of the images.
3rd layer - top layer is text that changes with each image and a previous/next option that should show on top of the menu bar.

<div>
  <div id="slide1" class="pics"> 
  <div>
    <img src="/images/banner/portal_01.jpg" width="288" height="231" /> 
     <span style="position:absolute; left:202px; top:405px;">image 1</span>
   </div>
   <div>
    <img src="/images/banner/portal_02.jpg" width="288" height="231" /> 
     <span style="position:absolute; left:202px; top:405px;">image 2</span>
   </div>
   <div>
    <img src="/images/banner/portal_03.jpg" width="288" height="231" /> 
     <span style="position:absolute; left:202px; top:405px;">image 3</span>
    </div>
  </div>
    <div style="position:absolute; left:202px; top:405px;"><img src="/images/banner/scroll/overlay.png" onclick="someFunction()" hover="/images/banner/scroll/overlay.png"  class="rollover" /></div>
    <span style="position:absolute; left:350px; top:405px;" onclick="someFunction2()">PREVIOUS</span><span style="position:relative; left:400px; top:405px;" onclick="someFunction3()">NEXT</span>
 </div>

Open in new window

jQueryCSSJavaScript

Last Comment

kingsburymedia

8/22/2022 - Mon

kingsburymedia

3/2/2009

Looks like the absolute positioning is in place ok, try adding a z-index value to your divs to order them top to bottom. The higher the z-index, the more 'priority' it has, or the closer to the top of the layer pile. In the below example, #layer1 has a z-index of 10 (making it the lowest on the stack), #layer2 has a z-index of 20 (placing it higher on the stack), and #layer3 has a z-index of 30 (placing it on top).

Take a look here: http://www.divitodesign.com/2008/05/z-index-overlap-html-elements-with-css/ or search google: http://www.google.ca/search?q=css+z-index

#layer1 {
position: absolute;
z-index: 10; }
 
#layer2 {
position: absolute;
z-index: 20; }
 
#layer3 {
position: absolute;
z-index: 30; }

Open in new window

ASKER CERTIFIED SOLUTION

kingsburymedia

3/2/2009

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

kingsburymedia

3/2/2009

double post, sorry...

sl1nger

3/2/2009

ASKER

I'm using z-index. The previous/next work, but not the text. The text 'image1', 'image2', etc. are pushing outside of the box.

<div>
  <div id="slide1" class="pics"> 
  <div>
    <img src="/images/banner/portal_01.jpg" width="288" height="231" /> 
     <span style="position:absolute; left:300px; top:1px; z-index:1;">image 1</span>
   </div>
   <div>
    <img src="/images/banner/portal_02.jpg" width="288" height="231" /> 
     <span style="position:absolute; left:300px; top:1px; z-index:2;">image 2</span>
   </div>
   <div>
    <img src="/images/banner/portal_03.jpg" width="288" height="231" /> 
     <span style="position:absolute; left:300px; top:1px; z-index:2;">image 3</span>
    </div>
  </div>
    <div style="position:absolute; left:202px; top:405px; z-index:1; "><img src="/images/banner/scroll/overlay.png" onclick="someFunction()" hover="/images/banner/scroll/overlay.png"  class="rollover" /></div>
    <font size="1" color="white"><span style="position:absolute; left:355px; top:410px; z-index:2;"><a id="prev2" href="#">PREVIOUS</a></span><span style="position:absolute; left:430px; top:410px; z-index:2;"><a id="next2" href="#">NEXT</a></span>
 </div>

Open in new window

Your help has saved me hundreds of hours of internet surfing.

fblack61

kingsburymedia

3/2/2009

Do you have a live version of this somewhere? It might be easier to troubleshoot if I can actually see the problem.