I have a project, that has a Camera.js slider. The Drop-down submenu is rather long, and it keeps appearing below the slider.
I have tried switching around the position for the nav element with absolute, relative, fixed, gave it z-index of 99999, but still no change.
Can somebody help me out? I am out of ideas. The site is published here: http://www.xn--ftsszerels-c7ah27o.info/
Set your camera_wrap class z-index: -1.
i don't see any positioning/z-index set on the div.container element so try setting position:relative; z-index: (less than what is set on nav)
i think that should do it
Related
I am having an issue with the dropdown menu on this site.
as you see the dropdown showing behind the contents.
I added z-index in different places, but nothing changed!
update: It seems on firefox it shows correctly. the problem appears on chrome.
Ahhh, you mean the menu (I though selects over FAQ).
You try to set z-index to header--tabbar, but the parent is under content. You need to set z-index to .wt-container previous sibling, it means header. And of course, set position too.
style.css, line 778
.header {position: relative; z-index: 99}
I am getting a strange anomaly with my z-indexing. I have an image which I positioned relative with a z-index of 1, and that sits above my navigation which is positioned absolute and has a z-index of -1.
The issue is that on page load the image is behind the navigation until you scroll down and back up again, then it corrects it self and sits above the navigation as it should.
Any ideas on what might cause this?
Only set the z-index on the item you want to be ON TOP of everything else. Every element has a default z-index, so you don't need to set it on your nav menu. Just set the z-index on your image to something like 999999 to be on top:
z-index: 999999;
You could just use a z-index of 10. I think your problem may be setting the z-index to negative. I think other elements z-index default to 0? So putting it to -1 could make it behind another element and causing a weird result.
Edit: just noticed you said your nav menu was absolute. So you would have to have a z-index for it. Instead of it being -1, change it to 10. Then for your image, change it to 20.. or 100.. anything higher.
My site's navigation dropdown menu is hidden behind the featured post slider on my front page. I've tried changing the z-index value of the navigation li, ul, etc but can't seem to get it to work. I've gone as far as adding a z-index to every single css element that the navigation relies upon, but it still is under the slider.
Would appreciate any help.
Site: Link
(The EVENTS dropdown)
Thanks.
It's easily fixed, with something like this:
#nav {
position: relative;
z-index: 20;
}
z-index on its own is not enough, as it only works on an element with position other than static (hence relative, which won't cause any issues).
I have created a dropdown menu but the problem I'm having is that when I hover over the top navigation menu, the drop-down menu items are hidden behind the slider and content.
I looked online and trying to figure out the problem but cannot fixes.
Does anyone can hel me? Please if is possible explain really well.
Thanks in advance,
Helen
This is most likely down to the css z-index of the various elements on the page. Higher z-index values will position stuff on top of lower z-index values (providing they have a positioning value). However, you have to bear in mind that child elements cannot gain a higher z-index than their parent element, or at least you can assign the z-index to any value but they will always remain within the parent element at the parent elements z-index value. Most likely the slider on your page has a higher z-index than your header/menu bar.
Also, make sure you have position:relative, position:absolute or position:fixed or the z-index will be ignored.
If you're using a HTML list e.g. <ul> try adding a higher z-index to your list to bring it over everything else.
.dropdown li {
z-index:999;
position:relative;
}
I had a similar problem when working with my drop down menu and it showing up behind the slider. The slider z-index ranged from 1-5 so I made the z-index of the drop down much larger and it now displayed correctly.
At this link, you can see the bottom of the logo is blocked by the background image in the next DIV going down the page. I thought z-index was supposed to control this, but I am stumped.
http://dansdemos.info/prototypes/htmlSamples/responsive/step15_LogoProb.html
Is there a good way to put the logo where it goes on this page?
Any assistance will be extremely much appreciated.
Thank you.
Check this out: Z-index not working as expected working with picture and background-div
It may be that you need to set the logo to position: relative in order for z-index to work.
if you set the logo:
position: absolute
or
position: relative
that will work, its weird but that works. now the thing is that with position absolute you have to set the left or rights..