8

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.

jjj
  • 605
  • 1
  • 9
  • 26
  • oh...*Note: IE6 and IE7 incorrectly apply z-index: 0 to all positioned elements. The 2.1 spec says that positioned elements that are z-index:auto should remain z-index:auto unless explicitly changed* from the third source – jjj Feb 21 '10 at 11:22
  • @Rob Levine...it is just an info ... shouldn't it...should i change it???!! – jjj Feb 21 '10 at 12:18
  • a new question : is it one of combination of letters-indexes ?! – jjj Feb 21 '10 at 13:10
  • 2
    @jjj - You can't reclaim from CommunityWiki (otherwise you could cheat on the reputation system). Generally, CommunityWiki is for posts that are more of a community discussion or general info. Your question here is answerable, and would probably have been better left as a normal question (IMHO anyway). People often tend to reply more to non-CW as they get reputation for it. Never mind though - you got lots of answers anyway! – Rob Levine Feb 21 '10 at 13:16
  • @jjj - don't understand your question "is it one of combination of letters-indexes" – Rob Levine Feb 21 '10 at 13:17
  • @Rob Levine...oh i didn't know..but it is ok .. Knowledge is what i want and more important .. about the Q:: i saw this ...http://www.sitepoint.com/books/cssdesign1/bookindex.php ... so i asked if is there something like a-index ,b-index ...or etc ... to be sure that it is related... thanks, you are realy helpfull. – jjj Feb 21 '10 at 13:35
  • @Marc Gravell♦ ...no problem..thanks any way – jjj Feb 22 '10 at 12:20
  • You do not actually need position when dealing with bootstrap wrapped elements in order to use z-index. I am assuming the reason is that bootstrap has position with in it implementation. – Kat Apr 20 '18 at 03:30

4 Answers4

11

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.

Rick-777
  • 9,714
  • 5
  • 34
  • 50
Rob Levine
  • 40,328
  • 13
  • 85
  • 111
  • thank you for making that simple for me ... but i have a Q: you said "each time you explicitly set a new z-index, you start a new stacking context">> does that make the website Heavier or something like that? – jjj Feb 21 '10 at 12:01
  • 2
    when you say "heavier" I think you mean "does it make it more heavyweight/slower". The truth is I've never checked if it slows rendering (or increases memory usage) to have many stacking contexts, but even if it does (which I'm not sure it does), I'd expect the effect to be very small. Generally speaking, your page won't end up with too many stacking contexts anyway. If you are having to set z-index all over the place, it is probably a sign that the page needs redesigning. Generally speaking, even on complex pages with overlapping stuff, I only set z-index in a handful of places. – Rob Levine Feb 21 '10 at 13:08
4

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.

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
1

the most important thing to remember is that z-index works ONLY if the element has position relative, absolute or fixed

pixeltocode
  • 5,312
  • 11
  • 52
  • 69
  • Is this statement true? Z-index works only if position attribute set with value – DSK Oct 28 '19 at 09:14
1

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.

Steve
  • 5,771
  • 4
  • 34
  • 49
  • oh.."avoiding"..why ?(explain more) ...i mean ,depending on what i read , it is simple elements organizer..!! – jjj Feb 21 '10 at 11:45
  • I only tend to avoid it because for the most part of design it is unnecessary and it behaves pretty inconsistently between browsers and you end up spending time making it work in legacy ones. By all means use it if you need to, but if you're not doing dropdowns/tooltips/something else of the like I fail to see why you'd need to. – Steve Feb 21 '10 at 12:19
  • @ Steve...so.. it does make conflicts on browsers..? – jjj Feb 21 '10 at 12:47
  • 1
    I wouldn't say it makes conflicts on browsers, but as stated above various versions of IE have different z-index defaults and behave differently around it. – Steve Feb 21 '10 at 13:42