I've messed about with z-index until I'm blue in the face on this one now.
It's no doubt going to be simple though.
Please view this website and hover over 'Why Us' in the navigation menu. The dropdown menu appears behind the slider. I'm sure it must only be a z-index / position issue but I've not managed to see where the problem is.
(Not posted jsFiddle or code because imagine it will be quicker for you to identify issue directly in browser/on website).
You can solve it with z-index alone (plus fixing the overflow, too, so not really alone, I guess).
header.container {
overflow: visible;
z-index: 2;
}
#page.container {
overflow: visible;
z-index: 1;
}
There are two issues. This does the trick:
nav.container {
overflow: visible;
z-index: 1000;
}
The z-index doesn't solve it alone, as the sub menu is cutted by the hidden overflow of the <nav>-element.
dont forget to add
header.container {
overflow: visible;
z-index: 2;
position: relative // without this sometime z-index doesnt work
}
Related
I'm trying to make this suggestion box be on top.
I can't get the z-index to work properly. Any suggestions on how to edit the CSS to make it overlap the next content block?
Site URL: https://shop.cph.dk/thejourneyison
.class {
position:absolute
*or*
position:relative
padding: 0px;
z-index: 10000;
}
I've come across a strange "bug" on Chrome where the z-index is not showing properly like in every other browser (including IE).
I've read all related questions related to it and almost everyone in their questions were missing position or overflow.
The link for the website is THIS and there is a dropdown ul element in the middle search that when you click it, is behind the pictures. I've tried for hours all possible combinations with child-parent, different z-indexes, positions and nothing seem to get the dropdown in front of the pictures.
I would really appreciate it if someone could point me in the right direction or provide a sample to help me out.
Thanks!
Solution from answers: The div element which had the problem, has around 10 div elements above it as "parents". His z-index could not get in the front because his highest parent did not have position:relative, only had z-index which caused the problem for all other child divs below it.
Here is an example:
<div> <---- had only z-index, was missing position:relative
<div>
<div>
<div> <---- this div with z-index could not get in front because of the first one
</div>
</div>
</div>
</div>
You have to add
z-index: 1000; /* or whatever value works*/
position: relative;
to your #big-map. This will fix it. You forgot to add a position to that div, which makes that a z-index doesn't get applied.
The CSS of #big-map should look like this:
#big-map {
width: 100%;
height: auto;
/* background-color: rgb(229, 227, 223); */
/* background-color: #E0E0E0; */
-webkit-transform: translateZ(0);
display: block;
z-index: 1000;
position: relative;
}
I agree with Toni Leigh though: in the future you need to share code and a working example, so this question is also value in the future. If you can't share code or set up an example with a minimum amount of code, you can always ask it in the chat, where we gladly help you with such "bugs".
This is not a bug. The fact is that z-index must be defined on the parent element as well. Basically, how is an element supposed to act if the child has a higher z-index than the parent?
The problem is on your #big-map which is the parent.
It must have a high z-index, and position relative:
z-index: 10000;
position: relative;
adding that to your #big-map will solve it.
Only solved when the z-index is added to the tag for position absolute and fixed.
<div style="z-index:110">
No matter how high the value is in CSS, chrome bug converts it to a maximum of 17.
z-index:99999999999999999999999999999999;// translates into z-index:17
I am using fixed positions elements along side the css property clip to make a cool scrolling / paging effect.
This all works great but my issue is that I cannot click my links.
I can see that the fixed elements are overlaying each other which is causing the issue but I cannot figure out how to fix it.
I have tried changing z-index values on the containers and the anchor tag with no luck.
Here is a fiddle: http://jsfiddle.net/9ukyrbc0/
If anyone can help that would be amazing!
Cheers!
The problem is within .fixed-container:
.fixed-container {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
pointer-events: none; <-----
}
pointer-events: none;
Pointer Events are not triggered at all within that container ... thus links are not active.
more on this here ...
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
So I have figured it out, but I cannot really explain it.
The first thing to do is to remove pointer-events: none so thanks to #manhatmanich for spotting that one.
This makes the first link clickable but not the rest, it looks like a z-index issue but changing the z-index values does not work.
So while playing around I tried removing the position absolute from the anchor tag and BOOM, all links clickable.
You can see a fiddle here: http://jsfiddle.net/9ukyrbc0/10/
I honestly don't understand how this fixes the problem but it does!
I was having the same issue, the code given here without the pointer-events: none; worked for me. The only issue is that I also had links in my fixed position element and now those links don't work.
For me it was a floating action button with poistion-fixed bootstrap class added that did not work. It worked by just adding z-index:1 to its styles.
When opening the navigation dropdown, the transformed fonts in the sidebar on the right sidebar: "UNSERE HEIMSPIELE 2014",... and so on in kassel-titans.de are displayed over the navigation dropdown.
Why is that?
It looks to me that by declaring top: 16px for .GDtitans, you're giving that element a position. #megaMenu has position: relative, but neither have a z-index set. Since the .GDtitan elements occur later in the document, they overlap #megaMenu.
Try adding a z-index to both, something like:
#megaMenu {
z-index: 20;
}
.GDtitan {
z-index: 10;
}
Now #megaMenu will have a higher z-index, and will overlap everything else.
By Removing below (or using desired value)
-webkit-backface-visibility: hidden;
From your GDtitans class and it will solve your problem.
Here you can find more explanation on that: http://css-tricks.com/almanac/properties/b/backface-visibility/
you should but z-index on your navigation div not on ul only
div#navigation{
position: relative;
z-index: 1;
}
that should work fine
If someone can please help I am having an issue with my site in IE7. Go to this link
Testing page link
When you load the page then hover over one of the top nav links the Footer shoots up half the distance on the page and can only be reset by rolling over another tab on the right.
What the heck is going on? Is this a DOCTYPE or CSS problem? Here's what I've already checked
Doctype
CSS styles for image height and width to see if its releasing some kind of height (I dont know)
Duplicate css styles
Any help would be awesome THANKS
Just add:
overflow:hidden
to #nav a
Btw there are some better, pure css rollover techniques, just in case you didn't know
this has a strange smell to it (from your CSS file):
.rollover { display: block; cursor: pointer; }
/* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; }
/* only set width and height once */
.rollover:hover { visibility: visible; /*for IE */ }
/* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; }
i would fool around with this here, maybe getting rid of the visibility hack...
if you want to make something not show, use display: none; instead of visibility: hidden;
EDIT: While this may or may not be a solution, I used to put endless comments in my source code so that I "knew where I was" when I was developing. One day I came across a strange error in IE that was generated by the use of a strange combination of comments. After I got rid of all my comments, the error was gone... I'm not saying, I'm just saying... maybe worth a shot...
I wanted to add comment. But, I dont have any points to add comment. Thats why adding it as answer.
I am using IE8. I have opened the link you have given in IE8 and I haven't noticed what ever you mentioned. It is working fine... If possible, you can try using IE8.
Thanks,
Srikrishna.
Really strange issue...
I was just curious about your float: left; property on #footer, and after i deleted that it seemed to work. Give it a try...
hope it helps.
Sinan.