Solved

z-index problem with web page how to solve this

Posted on 2014-10-23
6
194 Views
Last Modified: 2014-10-24
I have a jquery menu that drops down over a static image working perfectly.  Then I had to convert the image to another jquery that is called cycle 2 where the image replaces itself with another image.  After adding that the menu displays behind it instead of infront of the picture.  The image is in a div tag named <div class="grid_12">.  I tried adding the zindex: 1; to this and that did not fix it.  Tried modifying div tags menu was in also same thing.  Can someone tell me how to fix this?
0
Comment
Question by:kdschool
  • 3
  • 2
6 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 40400389
Without a link impossible to answer
0
 

Author Comment

by:kdschool
ID: 40400403
It is inside a firewall so you can see it.  What if attach the code?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40400407
Save the page as Webpage Complete and attach
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 40400476
"zindex: 1;" is essentially what 'normal' content is.  Most overlays are declared to be 99 or 999.  Also, 'zindex' only works on 'positioned' elements even if the 'position' is relative.  It does have to be declared for 'zindex' to work.
0
 

Author Comment

by:kdschool
ID: 40402137
It is weird but  I had to create a new class that wraps around the rotating images and assigning that to the z-index 1;  It made the images go behind the menu again.  Weird as I was trying to put the z-index on the menu and that was not working.  So much for jquery.  Anyway just wanted to put this out there since it seems to be working opposite of what I thought it should be.  Thanks for your help.
 
CSS
.cycle-slideshow {z-index:1;}
source code
<div class="cycle-slideshow">
           <img src="/NewSiteFiles2/images/courier.jpg">
          <img src="/NewSiteFiles2/images/sax.jpg">
          <img src="/NewSiteFiles2/images/sax2.jpg">
      </div>
0
 

Author Closing Comment

by:kdschool
ID: 40402141
This solution helped me the most.  Complex problem without seeing the code.
0

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question