The website is http://columbiamillworks.com/photo-gallery/arches/
If you hover over "photo gallery" in the main nav, the dropdown is positioned behind the galleary plugin and you cannot click any links below the gallery-wrap. I have tried using z-index to no avail.
Any idea why those links aren't clickable?
Remove z-index from #main-nav.
It causes z-index of 100, while its children have z-index more than 100.
Removing it will resolve your problem.
Thar's cause the gallery wrapper is deeper in the DOM tree than the menu.
Therefore, you'll need to apply the z-index to the parent containers of both the menu and the gallery, which are on the same DOM level.
In your case that would be:
#headerwrap {
position: relative;
z-index: 2;
}
#body {
position: relative;
z-index: 1; // so the gallery container is actually lower on z axis then the header
}
Related
on this site i have the side nav position: fixed and it works fine, until someone clicks on "my cart" which then has the cart appear in a drawer, thus pushing down the main container.
however, the side nav isn't being pushed down and it looks like this. you can see the logo is working right as a comparison and the nav should be below it, but it's not.
here's the CSS on the sidebar currently
#index #sidebar, #index-v2 #sidebar {
top: 100px;
position: fixed;
left: 0;
z-index: 99;
}
any idea how to get it to work so the sidebar pushed down when the container is active?
As along as you have it set to position:fixed it will always remain right there. If you want it to move down when the drawer opens I would suggest placing the side nav inside the main container and setting it to float:left or position:absolute instead of position:fixed.
If you use the latter option you should set the main container to position:relative
I have a portfolio site here:
http://mrliger.com/index2.php
I have an issue whenever I hover of the menu li elements on the left side. The hover state changes the background color of the li to a darker grey but at the same time covers the arrow just to the right of the menu item. I'd like the arrow to always be visible. I've tried using z-index but no joy. Any suggestions?
The z-index property only works on positioned elements (position:absolute, position:relative, or position:fixed). This simple CSS should work for you:
.topnavi {
position: relative;
z-index: 1;
}
OR:
.arrow-up {
position: relative;
z-index: 1;
}
Note: For future questions, it's better if you add the code here instead provide a link.
I am having a problem with z-indexing on a website I am maintaining. It appears to be caused by z-indexing in the SuperFish Menu and a div. However, no matter where I put the position:relative/absolute & z-index: 99999 declarations, the menu is still getting stuck behind the third panel on the right.
To see this problem, you need to hover over Practice Areas, Then Real Estate. You will notice the sub-menu getting stuck behind the panel.
It's driving me nuts trying to figure this out.
The website is: http://174.120.240.5/~rushmars/
You have too much positioned elements. Lets look at the whole thing in a tree.
body - position: relative
#main
header - position: relative; z-index: 99
.primary_content_tail - position: relative; z-index: 9300
footer
As MDN says
A stacking context is formed, anywhere in the document, by any element which is [...] positioned (absolutely or relatively) with a z-index value other than "auto"
So we have two stacking contexts so the menu which is in the header will always be behind the content. Try to set z-indeces to auto (inline). Now we have
body - position: relative
#main
header - position: relative; z-index: auto
.primary_content_tail - position: relative; z-index: auto
footer
And it works as expected in Chrome Canary and Firefox Aurora. If you need the initial z-indeces you might need to create a new layer (stacking context) for the menu.
I'm working on the navigation for this website and am having trouble with the dropdown nav.
Basically, I have overflow: hidden applied to the container that holds the navigation items so that the rollover effect works properly (the bottom of the nav item is 'masked' off); you'll see what I mean if you roll over the nav on the website.
For Products there is a dropdown nav. As the site in built in Business Catalyst (CMS), I don't have control over how the navigation items are nested, but I can obviously style them / target them with JQuery.
Is there a way to make the dropdown container within div#navigation ignore the overflow: hidden rule I have applied? I have tried setting position to absolute and playing with the z-index, but no luck.
Any suggestions to achieve the same result are also welcome.
Solution:
Remove position:relative; rule from box with overflow:hidden; and set it to one of her parent boxes. Then absolute boxes in the box with overflow:hidden; will ignore this rule.
Demo: http://jsfiddle.net/88fYK/5/
overflow: hidden can't be overridden by descendent elements - they will always be clipped by the element with overflow: hidden.
Setting the element's position:fixed will remove the element and its children from the normal document flow allowing it to be unclipped. But you'll have to manually reposition it relative to the browser window. Not a great solution but it is a work-around.
if your container is set to "overflow: hidden;" and your dropdown menu is under this container, you just need to set "position: absolute;"
.container {
overflow: hidden;
}
.your_dropdown_menu {
position: absolute;
}
try to put position:fixed on dropdown content.
.dropdown-content{
position:fixed
}
For those of you who didnt find the solution to you problem in the answers already given, you can try and do what i did, wich is to give your "nav-bar" a different "ID" than the rest of the "containers"..........wich after 2h46min of trying everything.....i said why not and it worked, you never know it might be as simple as that
I have a web page with a CSS dropdown navigation menu. My issue is that when I hover over the top of the menu to make the dropdowns appear, everything else in the page moves to make space for the dropdown instead of the dropdown moving over everything else. My navigation links are in a div element with the id "header" and my CSS for that element looks like this:
#header {
width: 100%;
z-index: 100;
position: relative;
}
None of the elements in the page that are moving are inside the header and non of them have a z-index specified. Can anyone tell me what I'm doing wrong?
You need to add position: absolute to the submenus that appear when you hover over a menu button.
See here for a tutorial: http://www.htmldog.com/articles/suckerfish/dropdowns/
Also relevant: http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/
Change position to absolute and make the position of the parent container relative.
Or, in the opposite direction, create another container within #header and stuff everything inside it.
The key point is that the inner element needs to be absolutely positioned, but in relation to its parent. Therefore position parent relatively.