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;
}
Related
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 a problem to display the absolute positioned div and bring it to the front.
The relative div is small in height and the absolute one is big in height. And because I'm using floats inside the block divs, I've to use overflow:hidden to actually get the block div some height.
When I'm not using overflow:hidden and floats then the z-index applies just fine. But after applying floats and overflow:hidden the problem occurs.
Fiddle Link
Thanks for your help in advance.
I've to use overflow:hidden to actually get the block div some height.
you can use clear:both to give height for the parent of floating elements. you can use the ::after pseudo element to clear the float as follows:
.block::after{
content:"hi";
display:block;
clear:both;
}
JS Bin
I have a <div> that shows on :hover of another div. In IE & Firefox, the entire <div> shows when hovered, but in Safari, part of the hovered div is hidden behind an adjacent div. I have overflow: visible set on the hovered div, but the problem persists.
Open this fiddle in both Firefox and Safari and you'll see the issue in Safari.
http://jsfiddle.net/emturano/TRGm9/
z-index will not have an effect on an element if its position is set to static (as it is by default). Set position:relative on the container and then position:relative; on the items inside to make sure that the hovered element is frontmost. You'll need to make positioning tweaks to make sure everything lines up correctly.
Ok got this strange issue where i have a absolute positioned div with inside a header. Then there's a nav tag with a margin and for some the absolute positioned div instead of sitting top left of header it positioned where the nav starts. So if the nav has 100px top margin the div starts 100px down.
But the strange thing is if I apply a border to the header the absolute positioned div acts as how i would expect.
I'm using html5 boilerplate styles, this i suppose could be the issue.
It's easier to explain if you view an example. The below links are stripped down version and have identical mark up apart from one where the header has a border and the other it doesn't.
Example with the problem:
http://bennyb.co.uk/test/no-border.html
Example with the issue fixed when the border is applied
http://bennyb.co.uk/test/border.html
Thanks
B
EDIT:
Ok thought this was actually just related to nav but seems it's the same if a div
Apply
overflow: hidden;
to the header.
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;