Solved

z-index problem with web page how to solve this

Posted on 2014-10-23
6
181 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

920 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now