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
Related
I have a fixed position element inside a relatively positioned element, as far as I'm concerned the position: relative element shouldn't have any effect on the position: fixed (fixed elements are positioned relative to the window, right?).
However, the fixed elements z-index seems to be inherited by it's parent, to the point where it's z-index can be no higher than its parent's z-index.
I hope I'm making sense? Below is a HTML example of what I'm talking about:
.outer {
position: relative;
z-index: 2;
}
.inner {
background: #fff;
left: 50px;
position: fixed;
top: 40px;
z-index: 1000000;
}
.fade {
background: #555;
bottom: 0;
left: 0;
opacity: 0.5;
position: fixed;
right: 0;
top: 0;
z-index: 3;
}
<div class="outer">
<div class="inner">testing testing</div>
</div>
<div class="fade"></div>
If you change the following:
.outer { position: relative; z-index: 4; }
Then the .inner element appears in front of the fade element.
I find this behaviour very peculiar... is there a way of working around this without moving the .inner div, or changing the CSS of the .outer div?
Fiddles of above code samples:
http://jsfiddle.net/n2Kq5/
http://jsfiddle.net/U8Jem/1/
In short, yes, an element with position:fixed is limited by its parent's z-index given the parent's z-index is defined.
Sad to inform you, but what you want is not currently possible. The only way you can get the effect you desire is to change your HTML or remove the z-index from outer.
Changing HTML options
The first option is to move inner outside of outer, which would look like this.
The second option for an HTML fix is to move fade inside of outer (using the same CSS even) - demo of that here.
A third option would be to put fade inside of outer and then also put inner inside of fade, but that requires you to use rgba colors and opacity - that demo is found here.
Changing CSS options
The closest thing you can get using the same HTML you have currently is to remove the z-index of outer - Demo here. You would think that you could simply increment each element's z-index by two, but that does not work due to the fact that children elements cannot have a higher z-index than their parents (if the parent's z-index is set).
Explanation
If you think about it, fade and outer are on the same level. What you're trying to do is have fade remain on that same level but also have it be on the level above, which is impossible. It's like trying to be on two floors of a building at once, it can't be done.
Although what you need is not directly related to this article, Philip Walton created a great post on z-indexes and the effect opacity has on them, which could be useful to others looking at this question.
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
}
I have what seems like a simple arrangement: a list of tags in a UL, and the last list item holds an absolutely positioned list of the "rest" of the tags.
See a stripped down demo here: http://dev.timmurtaugh.com/demo/chrome-problem/browse-bar-sandbox.html
In Chrome (and only Chrome so far as I can tell; version 19.0.1084.56) the absolutely positioned list is being overlapped by the "Instrument" header below it.
Help!
Try adding z-index:999 to below mentioned class:
.browseBar ul.tagList li.seeMore, .browseBar ul.tagList li.clearAll {
position: relative;
color: #C82D09;
cursor: pointer;
z-index: 999; /* Add This */
}
I'm new to CSS and trying to build my site.
I'm coming across a problem.
I've created a div with a fixed position, however it is appearing below other elements on the site. How do I force it to the top?
div#floater {
position: fixed;
top: 420px;
left: -110px;
}
div#floater:hover {
left: 0;
The site can be found at goinnativerecords.com (hover over the images to the side).
I know my coding isn't the cleanest (tips are appreciated).
Thanks!
simply use z-index:
z-index : 1;
Note that z-index only works on elements that have some kind of positioning set (relative, absolute, fixed)
nuances:
Elements with a higher z-index will appear in front of elements with a lower z-index in the same stacking context. If two elements have the same z-index, the latter one appears on top. Stacking context is defined by:
The Document Root
Elements with position: absolute or position: relative and a z-index
Elements that are partially transparent, that is they have an opacity < 1
In IE7, any element with position: absolute or position: relative (this can cause many bugs since it is the only browser that acts this way)
If IE7 is an issue, you can make all browsers behave the same by always adding z-index : 1 to any element that also has some position set.
Make use of CSS z-index Property will resolve your issue
.myclass
{
z-index:1;
}
for your problem have look : Layer on layer with z-index (Layers)
this should do it, with Absolute position your elements are always positioned according to Top, Left value you specify
div#floater { position: absolute; top: 420px; left: -110px; }
div#floater:hover { left: 0;}
I tried to create a drop down menu. That's what I did so far:
http://gegensinn.org/test.html
(I made the drop down menu visible at all time for "debugging")
I think the problem is quite obvious: The menu is behind the text.
First I thought I could fix this with z-index.
Although I'm not quite sure which element has to get the z-index property.
I tried to set the whole menu to z-index:100; and at the same time set the z-index:1; of .main.
Afterwards I tried to set only the z-index of <li> and <a> but nothing worked.
add position:relative on #header :)
I think applying z-index like so should work.
CSS
#menu a
{
z-index: 100;
}
#menu ul li ul
{
position: absolute;
}
#main
{
z-index: 10;
}
Some browsers ignore z-index if it is not set on both elements in question.
add position relative to li and position absolute to sub ul and then z-index
For anyone else with this issue, just add !important and the z-index to the menu/header area:
position:relative !important;z-index:999