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.
Related
I simply want to put a button that is positioned as position absolute in front of a div that is positioned as position fixed. This way I want to prevent the button from being disabled when an angular dialog is shown and the shadow overlay of the dialog 'hides' the button. The problem is that when using position: absolute setting the z-index has no effect. When using position: relative at least a negative z-index prevents the button from being clicked at all, but it's still visible (don't know if this is expected behavior, I expected it to disappear). But no matter how high the z-index value is, it's never on top. The dialog overlay only has a z-index of 1000 ;
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 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
I'm really stumped on this. I've tried setting a z-index on the iframe element but it keeps getting stacked behind the menu on this page. I've tried setting a lower z-index on just about every part of the navigation menu as well--no luck.
link
any help would be much appreciated
If you set position: relative and z-index: 1 on the .ihcHeader element the video displays fine. This was tested only in Chrome on Mac OS X, so you'll want to test that's true cross-browser.
Basically, the element is not positioned, so z-index isn't working until you position the element. It must have a high stack order intially, so you need to set the z-index of the parent element in the tree to make sure the menu isn't displaying above the video content (or the overlay)
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.