On a freshly loaded site, when I go inspect an element, a CSS property is always unchecked. It's there and I can enable it, but it's unchecked by default.
The style is position: sticky
Tried this in different browsers:
* Chrome and Firefox: it's unchecked, but I can toggle it
* Safari: it's "commented out" and also I can toggle it
To be clear: I don't see any other position styles being applied on that same element.
Any ideas?
Figured it out - the style was actually commented out in code.
What surprised my was Dev Tools picking up commented out styles and listing it.
Updated: as #sebastian-zartner pointed out, these commented out styles will always be displayed
An element with position: sticky; is positioned based on the user's scroll position.
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
Safari requires a -webkit- prefix
Related
I have a div for which pointer events is set to "none". I can click through to elements underneath fine, but if I right click an element and inspect it with Chrome, it gives me the div that's on top. Does anyone else have this issue? I don't remember it being an issue before.
Per this Chromium issue comment, you can hold Shift while using Chrome's inspect element from devtools, which will highlight elements (with parent element in red) even when they have pointer-events: none on them.
According to this https://code.google.com/p/chromium/issues/detail?id=136887 it is proper behaivor.
What was before (when you can't inspect elements with "pointer-events:none") was a bug.
Chromium has tests for this fix: https://chromium.googlesource.com/chromium/blink.git/+/dfcf6a3782dcae5dd16baec94040b931b0791fa6/LayoutTests/inspector/elements/inspect-pointer-events-none.html
I have a dropdown menu which works fine in all modern browsers, but there are some weird things happening in IE9. The dropdown appears transparent or invisible in some way, but its box-shadow is visible. In addition, hovering fails when you mouse off the parent list item.
I am referring to the main navigation bar at the top:
http://gratefulglass.viussandbox.co/
I placed a red border on the submenu's containing element, to illustrate that the menu appears to be positioned correctly.
Any suggestions would be greatly appreciated.
The issue is with the filter CSS properties you're setting on the <ul> and <a> tags in your code. IE9 will render the gradient backgrounds for you, but that causes it to set the hasLayout flag on the element internally, which causes the renderer to treat that element as if it had overflow: hidden; and you can't override that by simply setting overflow: visible; as it's not actually a CSS rule, but rather the way the internal rendering engine will treat the element when processing it. If you remove the filters with filter: none; in an override, or simply don't set them, then you should see everything work correctly again.
Check this links:
1,
2
Sorry, but cant put more links:
http:// && joseph.randomnetworks.com/2006/08/16/css-opacity-in-internet-explorer-ie/
http:// && www.webdeveloper.com/forum/showthread.php?163100-Opacity-hover-not-working-in-IE
Some properties behave different or are not persistent depending the browser.
But there is always a way to make it work.
Best way to make it work, javascript.
Please see the screenshot below. I have a jQuery menu and an iframe that loads a PDF document. In Chrome and Firefox this works perfectly and the menu appears over the top of the iframe. I have a z-index: 2 on the menu and a z-index: -1 on the iframe.
Any ideas of how to fix this in IE?
EDIT: jsFiddle
http://jsfiddle.net/hkA2v/1/
Try adding position:relative; on iframe.
iframe{
position: relative;
}
Not directly related to this specific issue.
But people, who are struggling with z-index similar issues in IE9 might consider adding a transparent background in some cases.
Because in IE the element with a link must have a background in order to be click-able. Otherwise the mouse ‘sees right through it’.
background: url(transparent.gif);
Source: Forum Post
Make sure all elements with z-index are siblings of the same parent. If you start nesting elements inside elements and apply new z-index properties to those children, the z-index will start from the parent's z-index, not any z-index properties set before the parent.
IE is very picky with z-index.
I have created a page with a "back" button at the bottom right. It looks well positioned in Firefox and more modern browsers however in Internet Explorer 6 the "back" button is missing.
http://www.aetnamarketingcommunications.com/DentalQuiz/QuizTestPage.html
I have tried adding z-index property to this absolute positioned image button without success...what could be the issue?
Thanks, Attila
To fix this bug, try clearing your absolutely positioned element by adding clear: both to the anchor styling. It's a bug in IE6, and has nothing to do with floats.
IE6 is below 1% usage, not sure why you want to support it.
Special Note About Z-Index (IE): If you're using z-index in IE6-IE8, it should be noted that the stacking order in IE gets reset whenever you apply position: absolute, so the z-index is not relative to any of its parent containers.
I don't test for ie6 anymore but I would try *zoom:1 ing everything like so
* {
*zoom: 1;
}
and narrow it down from there..
javascript snippet:
var ele = document.getElementById( "somelement" );
ele.style.zIndex = 15;
Basically i want to know does firefox and opera support .style.zIndex attribue? b/c i test the above in my code and the zIndex does not seem to reflect..
Take a look at http://fiddle.jshell.net/KdAYc/1/
Also, as other's might suggest, the element that is being given a specified z-index will need to be positioned with either fixed, absolute, or relative. Default is usually static.
Firefox certainly does - not sure about Opera. It may be that some other CSS property is conflicting with the element on which you're setting .style.zIndex - for example, I have seen problems occur when trying to place an element 'on top of' another element that has position: relative. Do you have example code that you can post?
I'm going to go out on a limb here and guess that the elements that you have a z-index for don't have the following css attribute:
position:absolute;
If the positioning is not absolute, it won't work.