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.
Related
I am struggling trying to figure this one out. I have an article that has two elements being inserted :before and :after it that are both being positioned absolutely within that article.
In all browsers except IE8 the z-index stacking is working perfectly. It should go in this order from bottom to top:
Article Content > Fade Out Image > Icon
I have already tried a few different things, the latest of which can be seen here: http://jsfiddle.net/LtYMV/2/
A basic run down of what I'm trying looks like this:
article {
// styles
}
article:before {
// icon background image used on inserted content
}
article:after {
// background image used on inserted content
}
I know there is some sort of trick to this I just can't seem to figure it out with any combination of z-index values. Help appreciated!
IE8 is weird when it comes to pseudo elements and z-index. There's a bug that make child elements kind of inherit (without being able to overwrite) the parents' z-index. You can read more about IE8 and z-index on quirksmode.
I changed your fiddle a bit to work the same way as your example in standards compliant browsers and to work alright in IE8, but without the fade in IE: http://jsfiddle.net/LtYMV/8/, although with the icon under the text.
I also created a version where it's using another element for the icon (with the class "icon", just after each ".post" element). It still hasn't got the fade for IE8, but the icon is over the text: http://jsfiddle.net/LtYMV/7/, so it's a slight improvement from the previous one.
Hope this helps!
Here's a JSFiddle that breaks uniquely in Internet Explorer 9. I'm hoping someone has seen this and knows how to resolve it.
http://fiddle.jshell.net/se9Kc/1/
Note that the scroll area top edge decoration, or "fader", gets clipped on the right side in IE9.
I understand it's natural to question the use of "fixed" at this point. The full page has an inset scrolling table with an absolutely-positioned header, adjacent to the search criteria. The "fader" is anchored to its non-scrolled (but still fluidly-generated) origin with position: fixed.
The defective algorithm seems to go like this:
correctly generate the visibility mask and content for the fixed element
correctly position the element content as requested
incorrectly position the element visibility mask against the left edge
Help?
After doing a bit of testing, it seems like using javascript to handle that particular css property allows it to function properly.
Remove:
position: fixed;
and add somewhere on your page:
<script>
$(.fadeTopGradient).css({'position':'fixed'})
</script>
If you would like accomplish this with css alone, I'm not 100% sure what to tell you. Though I did see a question regarding position:fixed in IE9 asked before here: position:fixed breaks in IE9
I hope this helps.
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..
Like alert bar of stackoverflow here.
It should not be position:fixed,because it's not supported by all browsers.
Absolutely,neither will position:absolute do.
You could always use EMCAscript or one of its forms (JScript, JavaScript) to calculate the position of the viewport and set the position equal to that.
function positionView()
{
return (window.pageYOffset) ?
window.pageYOffset :
(document.documentElement.scrollTop) ?
document.documentElement.scrollTop :
document.body.scrollTop;
}
function setPosition(object)
{
object.style.top = positionView() + "px";
}
Then just pass in the DIV object you want to use, with document.getElementById.
I'd use position: fixed;. Many people still use IE6, though, which does not support it.
Put the div under the body tag, give it position absolute, top:0, left:0
And if you want it to push the content, just put it there without the CSS I gave you.
Its very simple step if you are using any class in css apply one more property z-index = 1;
it will make that div to always on top, if that div is relative to its parent div.
Make sure the element is directly nested under the body tag, use css with absolute position and top:0;
By the way, fixed is used by a large majority of the browsers.
Only fixed positioning does this, unless you want to use javascript. Which you don't, because it's an ugly way of doing it.
Just do it like SO does it. Use the "notifycontainer" and populate it with InnerHTML from JavaScript when you need to. Since it's a relative positioning, when you rewrite the InnerHTML the page rerenders based on the contents of the div as they are at that moment. Same deal when you want to clear the alert, you just rewrite the InnerHTML. You don't even need to write animation code. The way browsers render now, the animation will be automagical.
I know there is the bug where absolute elements appear above relative ones. However I am getting the reverse of this issue.
The z-index on the "bottom" element is 1 and has a position:relative assigned. The top element has absolute positioning and a z-index of 99.
This works fine in Firefox, Webkit based browsers and IE8. Any ideas about why this could be happening?
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.
See
Bug Report: Explorer z-index bug
and
Squish the Internet Explorer Z-Index Bug
$(function() {
var zIndexNumber = 1000;
$('div').each(function() {
$(this).css('zIndex', zIndexNumber);
zIndexNumber -= 10;
});
});
Use the above if already using jQuery. Details here: http://www.vancelucas.com/blog/fixing-ie7-z-index-issues-with-jquery/
I've found a helpful resource to address this:
Long story short, if your absolutely placed element is empty, IE doesn't like to place it in front of other elements (eg. relatively placed text). You can use a 1x1 transparent gif to overcome this, eg. by setting a style like the following on your absolutely placed element.
.mask {
background: transparent url('/images/clear.gif') repeat 0 0;
}