on this webpage Voting System I have lunch pictures when you move mouse cursor over camera icon. Span which contains image have z-index 1000, tables have z-index 1, but images are showing under tables. Can you help me please? What's going wrong?
All your tables have z-index 1, therefore they are at the same level and source order will determine which tables get on top of the other if they ever get to overlap.
You're pictures may have a superior z-index, but they are contained by your table.
z-indexes are not global, they apply to a "stacking context". Everytime you add a z-index to an element (and some other css properties too, like opacity or transform in your case) this element create it's own stacking context for the children it contains.
You are going to have to use different positioning. For example:
imageclass{
position:absolute;
}
If you do not do that then your elements are positioned relative to the their parent element.
Please include your code if this does not work as just looking at a web page is not enough to fully diagnose a problem.
Link to more info about positioning
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.
I have a dropdown with absolut positioning being covered by the following element. I have limited access to the HTML but can change the CSS.
I want the dropdown div.esri-menu to cover the div.row-2 column-1. How can I achieve this by changing the CSS Code?
I have tried different positioning values and using the z-index, but did not succeed.
Dropdown
Covering Div
div.esri-menu has a position: absolute but it's related to the closest parent with a position different than 'static'. Which container is that?
On the other hand div.esri-menu and div.row-2.column-1 belong to different containers.
The answer is about positioning the two containers div.row-1.column-1-3 and div.row-2.column-1.
Try giving div.row-1.column-1-3 a 'relative' position. That should help.
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 read that some CSS transform properties do not trigger layout:
scale, rotate, position, opacity
This might be an obvious question, but does that mean they will always be applied independently regardless of other contents on the page?
For example, when I change a position property with translate(x,y) to move down a box, will it not push the contents below? I made a fiddle myself, and it seems that changing position is completely out of the dom flow.
Yes you're right, transform will not cause other elements to flow around it. This is why the div on top will not push the div on bottom down with it.
Check this link for more description.
I'm working on an application with a map and there is a div in the corner with some stuff in it. You can click on this map to bring up some information in a little window. The window is, in some cases, being covered by the div in the corner.
I want the opposite effect (window covers div). I figured this would simply be a z-index issue but I'm unable to get it to work. This is with IE7 and from reading up a bit it seems like z-index won't work unless it's inside of an element that is positioned.
The elements seem to be positioned properly to get the z-index to work right but I'm having little luck. I've played around with adding styling via Firebug but haven't had any luck in getting anything to change. The window really is just two divs one absolutely positioned one and a relative one inside of it.
Is the z-index the only thing that could be the problem here or is there something else I don't know about?
Are there any other methods to achieve the effect I want? I cannot simply hide the div via jquery or something because part of it should be visible from behind the window that opens on the map.
You are hitting the stacking context bug
http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html
Every positioned div in IE will create a new stacking context and prevent z-index from diferent stacking contexts to come on top of others.
The solution is to have the window you want on top up in the tree (into the body for example) and z-index value grater than z-index of all parents of the other div covering your window.
Extensive information to understand the problem here:
http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/
positioning and negative margins is the only way to get elements to overlap that i know of. z-index is just used to explicitly tell the browser how to layer the elements.
as to your problem, IE requires the container elements and/or elements that you are overlapping to have position:relative; or position:absolute; for z-index to work properly. When someone say positioning they're usually implying having the position property set in CSS. Also when working with z-index make sure that the overlapping elementa are at the same level with each other.
Hope this helps
Quite simply, the order of the elements in your HTML file will determine stacking order. If you want an element to be above another then make sure it comes later in the HTML.
You can only swap the stacking order on elements that are all in the same containing element. For example if you have two divs and they both contain 3 images you cannot make images from the second div go below images from the first div.
You need to plan your HTML ahead if you need complex stacking orders.
As hinted by the other answers, position:relative and position:absolute reset the "stacking-context" in IE.
If you want a lazier answer you could use javascript and hide the div when you click on the map, and show it when you close the map.
You will have to do this with any selects on the page anyway because in ie they don't work with z-index.
I ran into this same issue a couple days ago and found the negative margin as suggested by Darko Z worked great. (My rep isn't good enough yet to vote for Darko)
I wrote a quick post on it.
http://www.swards.net/2009/03/layering-html-elements-without-using.html