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)
Related
I have a fixed horizontal menu that works well on firefox but it's presenting a problem in SOME instances of chrome. When the user scrolls down a white block covers the menu.
You can see the problem here: http://brandca.co/cterranum/
We've inspected the elements but it doesn't appear to be anything in the code and looks more like a rendering issue.
We've noticed that when we erase the element's overflow:hidden the problem fixes but we need this property to toggle the menu.
We haven't been able to pinpoint exactly when it happens since it looks it only happens in some computers and even then, a computer in wich the site rendered correctly had the problem happened oduring a presentation on the projection screen.
The fixed element was somehow screwing webkit's rendering, so I turn the element to position: absolute and on the scroll event I update the top value so it looks like its fixed. It's not pretty but it works.
Element has "position: absolute;" and inside it there is .inner-header which has "position: fixed;".
Try moving ".inner-header" outside of ".header".
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.
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.
I have a set of bootstrap nav-tabs and inside these tabs are nice long information sections. Problem is that our team does not want to have all this information on such a long tab so we have made the tabs container element have an overflow: scroll property. This works great but now we are stuck with an impossibly long inline scroll section and it would take a good 30-40 mouse scrolls to get to the bottom. This will lose us site traffic.
I know that the definition of being a fixed position is being fixed relative to the browser window but I am in need of a way to use bootstrap scrollspy nav-list menu inside of the parent div and not have it able to transverse outside of that div. So we need it the same way that the class="fixed-to-top" attribute works so that is a functionable nav menu but no matter what we try it seems that the fixed positioning always reverts back to being relative to the broswer.
Is it possible to do what we are trying to do?
The code below is not a complete implementation, but I hope it gives you an idea of how it could be done. I.e. change the position property if the fixed div goes outside of its parent/container.
var $nlm = $('#navListMenu');
$(window).bind('scroll', function(){
if($nlm.offset().top < $nlm.parent().offset().top)
$nlm.css({ position:'absolute', top:0 });
else
$nlm.css({ position:'fixed'});
}
I have a container div with z-index of -1 (because above this container is a menubar with a menuitem with dropdown list). I have a hyperlink (a href text) inside this container. It is not getting clickable on Chrome. In IE, its Ok.
Any suggestions, please?
Ok, I solved the problem myself. For anyone interested, what I did is I made the z-index of the menubar div +100 rather than making the z-index of the container div to -1. However, now, the opposite phenonmenon occurred i.e. worked in chrome but not in IE. Then, I found this site :
http://briancray.com/2009/04/16/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/
which explains how to target the css explicitly for IE. So, with sort of binary switching the z-index for each browser type, I managed to do it.