Solved

z-index problem with web page how to solve this

Posted on 2014-10-23
6
174 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
Comment Utility
Without a link impossible to answer
0
 

Author Comment

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

Expert Comment

by:Gary
Comment Utility
Save the page as Webpage Complete and attach
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 82

Accepted Solution

by:
Dave Baldwin earned 500 total points
Comment Utility
"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
Comment Utility
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
Comment Utility
This solution helped me the most.  Complex problem without seeing the code.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 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

8 Experts available now in Live!

Get 1:1 Help Now