Can someone please help me with this problem i am having with my menu ?
THe problem is only in IE in compatibility mode. I have the menu with position absolute and z-index 99999999 but still the menu is hidden behond the content.
Please check :
http://www.tomasdostal.com/projects/modul16/draft2/?page=buildings
Thanks for any advice
I have the menu with position absolute and z-index 99999999
You need to use an even higher z-index!
..just kidding.
IE in compatibility mode = IE7.
IE7 has known bugs with z-index, see: IE7 Z-Index issue - Context Menu
In this specific instance, one way to fix it is to add z-index: 1 to the <div class="grid_3"> that is a parent of your menu.
Z-index only works with absolute positioning (the element is currently positioned relative to it's parent element). Add the following CSS to .menu_wrap.
position: absolute;
top: 0;
left 0;
Related
Hi i have applied position sticky on one of my element. I used following code:
position:sticky;
top:10px;
z-index: 1;
Also i have removed overflow hidden from parent classes. But still sticky position not working.
Any suggestion please.
Thanks
Are you on Safari.
Unfortunately position: sticky is not supported in Safari with some disparity in some Chrome versions i think.
I would recommend using the old way with position: fixed; and absolute positioning.
I have a dropdown menu that behaves fine everywhere (even Edge!) except for IE11.
The dropdown menu has:
position: absolute;
left: auto;
top: --nav-height;
I can see that in IE11 it aligns itself to the right of the box border of Root A, which seems to indicate that it's not really absolutely positioning itself...
The code is from this codepen but I can't get it to work at all on IE11
All other browsers:
IE11
Try to add position:relative to the containing elements of your submenu element, in your case i think it contented in the element showing the Root A text, than you can apply left:0px to the submenu element.
It is important to understand that a value of left:0px is set equal to the left of it's parent element, not the page.
And setting position:relative on a the parent element sets the bounds of an absolutely positioned element equal to the parent element.
I have an absolutely positioned div with z-index defined on it. In this div there is a fixed child div with a z-index defined on it as well. I want the fixed div to be on top of his parent.
In all other browsers this renders fine but in chrome when the parent div has a scrollbar, it appears on top of its child. Here is a CodePen.
Adding transformX(0) on the parent div will not help in my case as the child div would confine in the parent. Any help on this is much appreciated. I only found this issue in the Chrome Help Forum but it has not been answered.
Apply z-index using webkit engine. Hope it will fix the issue
.abs::-webkit-scrollbar {
z-index:10;
}
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'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