I worked on a solution since 2 days but i can´t find the problem.
The Problem is that my Navigation/menu is behind a slideshow in the header and that´s only in IE.
All other Browsers worked fine.
Here is the URL: http://ditzinger.de/wordpress/bahntechnik/
Can anyone help me please?
In Internet Explorer positioned elements generate a new stacking context,
starting with a z-index value of 0. Therefore z-index doesn’t work correctly.
giving the parent element a higher z-index actual fixes the bug.
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Set the higher z-index value into your sub-menu class with position.....
Related
This bug is appearing only in Safari on Mac OS and only with the current set up in our application. Initially I though it was a z-index issue, since some elements disappeared after updating that value.
Although there's a last element that has no z-index value and it's always displayed on top of the full-screen video.
--see screenshot below--
I have tried removing all styling from the bar you see on the screen and it would still appear on top of the video.
--see screenshot below--
As you can see the elements within the bar are still visible.
I haven't been able to reproduce the issue on codepen.io or jsfiddle and nothing is currently available in Stackoverflow or GitHub.
SOLUTION:
removing will-change property from the container solved the issue.
DESCRIPTION
The problem that caused this issue was the property will-change set to one of the containers of this video element.
The structure of the application is quite complex so I am not going to post the whole code here. Although by moving around the video element in the inspector and testing the full-screen functionality every time, I narrow down the problem to one div container that had this property.
If you guys find out the exact reason why the default full-screen functionality of safari broke down because of the will-change property, post a comment or an answer since it will be very appreciated.
I had a similar issue with my application. Web elements were overlapping fullscreen videos. Only effected Safari on Mac OS. I also assumed it was a z-index issue specific to Safari and initially tried modifying z-index when fullscreen mode was detected. Thanks to Guilio G.'s comment above the issue was resolved by removing the -webkit-backdrop-filter:blur(3px); of a parent <div>.
Like Guilio G., I don't yet know why, but this -webkit declaration was causing the issue and removing it resolved the problem.
In my case, this issue was being caused by isolation: isolate on an ancestor element. Removing this property fixed the issue.
Hopefully Safari fixes this, since isolation is a wonderful property that solves a bunch of stacking context issues.
All,
If you look at the following webpage:
http://tinyurl.com/7a5htbt
If you scroll over the view recipes in IE8 it goes behind the scrolling images. I'm not sure why because the images have a z-index of 2 and the menu drop down has a z-index of 999. Any idea why this isn't working?
Thanks!
in IE, positioned elements start a new stacking order, causing what you are seeing. Sometimes you can give the parent element a higher z-index and it will solve the issue. Google for IE z-index bug and you'll find a fair amount of text on the subject.
I am trying to reset the z-index property of an element. It works everywhere except (surprise!) IE7 or IE8-as-IE7. Can anyone point me to the right direction?
Test Case on jsfiddle.net
Frankly I do not hope to have it working in IE7, maybe anyone has ideas for a workaround?
Some context:
The element in question has an input child and is itself located within a jQuery UI Dialog. The Dialog library disables modifications of any fields with lower-than-overlay zIndexes. This feature combined with the above bug means that I can not edit the field even if I properly reset the zIndex for the test element.
Thank you for any ideas you can give!
So IE7 has a strange bug where you have to set the z-index of the parent element too. Check out here
You could also try adding zoom: 1; that sometimes works.
I am struggling with z-index for popup (newsletter signup) and it is still underneath the navigation and its dropdown. I googled and found out that relative + zindex gives IE bug but I added in z-index and they either go under or top of each other. Right now I cannot figure why it is behaving weird.
I am wondering whether the header and the navigation are conflicting with each other in z-index? Any suggestion or anything will be appreciated. thank you
To #header, add z-index: 101.
It's 101 because something has a z-index of 100: I suspect it's div.col-left.
I forget the exact details of the IE bug in question, but the fix in this case is applying a higher z-index value to the parent element.
Has anyone got any idea why the menu is rendering below the rotating images on this site in IE7: http://new.coffeelatino.co.uk/.
The z-index is much higher for the menu that it is for the rotating images.
Just another reason why IE is so dreadful.
z-index is ignored for elements that are not positioned. Add "position:relative" to the style of whatever you're trying to apply a z-index to, and that should fix it.
Hint for remaining sane as a web developer: Write against IE, then test with other browsers. Most things that work in IE will render correctly in FF and Chrome. The reverse, as you've noticed, is not true.