i build an hover-effect using CSS only. It works fine in all browsers except IE7.
Visit the page or view a screenshot.
As i read, it's because:
In Internet Explorer versions 6 and 7, the stacking order of z-indexed elements is essentially “reset” for any elements that are contained by a positioned element, regardless of wether or not the container (or parent) has a z-index value set. In other words, an element with a z-index value of 100 will appear underneath an element with a z-index value of 1 if the former element is contained by a positioned parent, and the latter is not. This is an incorrrect implementation of the z-index property that has evidently been corrected in IE8.
But how can i fix this IE7-bug?
I think you may want "z-index" instead of "zIndex." I've never seen or used the "zIndex" string. However, I am not sure if this will fix your problem.
Try adding position:relative; to your style. z-index bug for ie7 is pretty popular. Here is a link that explains more about it.
Related
This property make me confuse.
well.. i searched in google:
What is the z-index?
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Answer Source
What is the z-index uses?
The order of which the elements overlap one another.
For that purpose, you can assign each element a number (z-index). The system is that an element with a higher number overlaps an element with a lower number. Answer Source
Ok i understand now , it organize the elements and we can use any number ... the higher z-index number appears on all elements..ok nice.
z-index and jquery..very simple and very nice
...but i noticed from the answers that it depend on position property, so -->...(google)..
What is the relation between z-index and position?
demo--> >>source
Ok ... so z-index and position are couple..must be together..
need more information ::
dose it make any conflicts in browsers(IE7,IE8,chrome,...etc)?
What are the z-index uses or what can we do with z-index(depending on the Tags)?
...etc?
correct me if i understand wrong...
Thanks in advance.
Z-index is the property that determines which html element appears on top of another html element when they overlap. The basic idea is that the element with the highest z-index is "on top".
By default, elements have a z-index of zero, but setting the css property on one element to 1, and another to 5 will make the latter element be "on top" of the former, if they overlap.
So far, so simple, but there are several things to look out for.
One, as already mentioned in another answer, is that z-index only has an effect if the element is positioned with position absolute, fixed or relative. (i.e. the css property "position"). An unpositioned element has a z-index of zero.
To complicate things further (and in my experience the area that is often not understood) is the concept of the stacking context. More info can be found in articles such as this. In short though, each time you explicitly set a new z-index, you start a new stacking context. All child elements of the one on which the z-index was set are now in this new stacking context, which may be above or below a stacking context on another unrelated element.
What does this stacking context mean? It means that an element with a z-index of 100 is not necessarily on top of an element with z-index of 1. If they are in different stacking contexts, only the z-indexes of the stacking contexts themselves matters.
I would suggest to have a look at this property on SmashingMagzine.
The Z-Index CSS Property: A Comprehensive Look
It covers all nuts and bolts of this property with great examples and demonstrations.
the most important thing to remember is that z-index works ONLY if the element has position relative, absolute or fixed
I'm not entirely sure what you're asking but for the most-part you only ever need to use z-index if you're doing complicated styling e.g. hover tooltips or dropdown navigations, simply to ensure that they display over other page content.
For basic designing you should generally be avoiding using the position and z-index properties as you can usually achieve the same effects with better performance and browser compatibility with just floats etc.
The Smashing Magazine link posted by Sarfraz is an excellent article on the topic and a good point of reference if you're still struggling to understand the functionality of the property.
This property make me confuse.
well.. i searched in google:
What is the z-index?
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed). Answer Source
What is the z-index uses?
The order of which the elements overlap one another.
For that purpose, you can assign each element a number (z-index). The system is that an element with a higher number overlaps an element with a lower number. Answer Source
Ok i understand now , it organize the elements and we can use any number ... the higher z-index number appears on all elements..ok nice.
z-index and jquery..very simple and very nice
...but i noticed from the answers that it depend on position property, so -->...(google)..
What is the relation between z-index and position?
demo--> >>source
Ok ... so z-index and position are couple..must be together..
need more information ::
dose it make any conflicts in browsers(IE7,IE8,chrome,...etc)?
What are the z-index uses or what can we do with z-index(depending on the Tags)?
...etc?
correct me if i understand wrong...
Thanks in advance.
Z-index is the property that determines which html element appears on top of another html element when they overlap. The basic idea is that the element with the highest z-index is "on top".
By default, elements have a z-index of zero, but setting the css property on one element to 1, and another to 5 will make the latter element be "on top" of the former, if they overlap.
So far, so simple, but there are several things to look out for.
One, as already mentioned in another answer, is that z-index only has an effect if the element is positioned with position absolute, fixed or relative. (i.e. the css property "position"). An unpositioned element has a z-index of zero.
To complicate things further (and in my experience the area that is often not understood) is the concept of the stacking context. More info can be found in articles such as this. In short though, each time you explicitly set a new z-index, you start a new stacking context. All child elements of the one on which the z-index was set are now in this new stacking context, which may be above or below a stacking context on another unrelated element.
What does this stacking context mean? It means that an element with a z-index of 100 is not necessarily on top of an element with z-index of 1. If they are in different stacking contexts, only the z-indexes of the stacking contexts themselves matters.
I would suggest to have a look at this property on SmashingMagzine.
The Z-Index CSS Property: A Comprehensive Look
It covers all nuts and bolts of this property with great examples and demonstrations.
the most important thing to remember is that z-index works ONLY if the element has position relative, absolute or fixed
I'm not entirely sure what you're asking but for the most-part you only ever need to use z-index if you're doing complicated styling e.g. hover tooltips or dropdown navigations, simply to ensure that they display over other page content.
For basic designing you should generally be avoiding using the position and z-index properties as you can usually achieve the same effects with better performance and browser compatibility with just floats etc.
The Smashing Magazine link posted by Sarfraz is an excellent article on the topic and a good point of reference if you're still struggling to understand the functionality of the property.
I've stumbled across a bug with floated elements within a container when that container uses clear: both; (or left/right). In Chrome (not Safari), the first floated element is positioned correctly, but all subsequent elements appear to inherit the top margin of the parent element, shifting them out of line.
Here's the problematic code: http://jsfiddle.net/peterjmag/3zJey/1/
Try the toggle link to see the difference. Also, try various values for margin-top on #product-listing.
For those of you using other browsers, here's what the fiddle looks like for me (in Chrome 25.0.1364.160 for Mac):
Why does clear: both; cause this behavior in Chrome? According to the CSS 2.1 spec, the clear property should only affect floated elements that appear earlier in the document, not within the targeted element.
(Of course, I know there are other more optimal ways to clear previous elements in the document which would not require a clear property on the container div—I'm simply trying to understand why this happens.)
It appears that this is indeed a Chrome bug: Issue 178134: Floated elements render incorrectly when parent element has a clear property + a top margin. According to that report, Chrome 27 and above are not affected.
I have a z-index (well, I think) issue on this website : http://dev.golfuse-ag.com/
I had to use a 100% width+height div to create an extra background. Now, in IE8, I get this z-index interpretation issue even if I had a greater number for parents elements.
The DIVs in questions are #bckg, #wrapper and #mid
Tried a bunch of crazy things and... nothing close to OK.
If anyone can give me a hand with this one, you are welcome.
Thanks.
Ie will not let you have parents with lower z-index than child.
You can try z-index: -1 on your parent if you want, but i'm not sure it will work. IE does not interpret z-index like you want :S You'll probably need to put your background on another element, out of this element.
http://www.mimi.clickedsolutions.com/
in above site when selecting option in dropdown box right to search box in header options are going behind the header image or logo in IE-7
I think it the Z-index problem
i am facing this problem again and again and didnt get any effiecient solution yet
please suggest me the solutions
I'm on a ferry typing this on my phone, so I can't test your link, but...
In all browsers, z-index is relative to the nearest stacking context. In FF, Chrome, IE8, stacking context is most often created by having positioning (relative or absolute) and a z-index. In IE7, only positioning is needed to create a stacking context.
What this means is that in IE7, z-index only applies up to the nearest parent with any position property set.
To make all browsers behave like IE7, for sanity, add "z-index: 1" to any element that also has position set to "relative" or "absolute"
Background information for this bug: IE7 Z-Index issue - Context Menu
A solution specifically for your case and the exact way you have your page at the moment:
On #header-bar, add z-index: 9999 (or whatever number, I just picked that for convenience)
On #mainpage, add position: relative.
And here's a live version showing a version of the fixes in action, check it out with IE7:
http://jsbin.com/exuko6