javascript - All About.... Z-Index?

Question

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.

Answer 1

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.