CSS Almanac → Properties → Z → z-index
Sara Cope on (Updated on )
div { z-index: 1; /* integer */}The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only affects elements that have a position value other than static (the default).
Elements can overlap for a variety of reasons, for instance, relative positioning has nudged it over something else. Negative margin has pulled the element over another. Absolutely positioned elements overlap each other. All sorts of reasons.
Without any z-index value, elements stack in the order that they appear in the DOM (the lowest one down at the same hierarchy level appears on top). Elements with non-static positioning will always appear on top of elements with default static positioning.
Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.
Note that older version of IE get this context stuff a bit screwed up. Here’s a jQuery fix for that.
More Information
- How z-index Works(screencast)
- Rational z-index Values
- Understanding
z-index(MDN)
Browser Support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Works | Works | Works | Works | 4+ | 4+ | Works |
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
-
Mr Z
Permalink to comment#
“Also note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be higher than element B.”
That’s not quite right. In your illustration, “not child” will only be on top if the green box starts a stacking context, for which it needs z-index of anything except auto (or opacity of anything except 1.0). Just being position: relative doesn’t start a stacking context.
The main point about stacking contexts is that z-index can be used to rearrange the stacking order of elements only inside their own stacking context. That entire stacking context has a stacking position within its stacking context that’s determined by its z-index property and those of its siblings in that parent stacking context. Elements from different stacking contexts are therefore never interleaved in the final stacking order (this is what the spec means when it says stacking contexts are “atomic”).
If you think in terms of the “painters algorithm”, where objects are painted onto a scene back-to-front, then a stacking context is like a painting within a painting. You first paint everything in the stacking context back-to-front in the proper order, then slap the whole result in whereever it belongs when you come to paint its parent context.
With no z-index, things do stack pretty much in DOM order but with positioned stuff above, but it’s also worth mentioning that floats are also brought in front of non-floats (but behind the positioned boxes).
Reply
-
Vishal
Permalink to comment#
Thank you for the comment. Was really helpful.
-
-
Toby
Permalink to comment#
This had me caught out for a while earlier, so I thought I’d post a note here – don’t forget that z-index still respects parent’s overflow. So if you still can’t see something despite a z-index in the millions, check it’s not being cropped by an overflow:hidden
Reply
-
Matt
Permalink to comment#
I was fighting with this for an hour until I read this comment! Thanks!
-
Aashish
Permalink to comment#
Yeah I was also struggling with the same issue of parent’s overflow being hidden and your comment saved me! Thank you!
-
A. Cabreira
Permalink to comment#
Brilliant, solved me a days headache , thanks!
-
aj
Permalink to comment#
thank you thank you thank you!!
-
yes
Permalink to comment#
It helped me a lot. Thank you!
-
Pete
Permalink to comment#
Toby, this saved my afternoon.
Thanks!
-
hnguyen
Permalink to comment#
Thx Toby, u save my time
-
Martin
Permalink to comment#
Absolute lifesaver – thanks a lot!
-
Rajesh
Permalink to comment#
You are a star !!!!
-
overwine
Permalink to comment#
Years later, this still holds true. Check your overflow before you go crazy trying to figure out z-index.
-
Manish
Permalink to comment#
You just saved me lot of trouble! Thank you so much.
-
Alex
Permalink to comment#
Ten years later, and Toby’s comment is still saving lives (this time mine).
-
-
Helen
Permalink to comment#
Thanks, I’ve been fighting with z-index again today. For the first time I think I might be winning!
Reply
-
ankush
Permalink to comment#
hi, i am ankush form india and i am web designer. i want to work with you can we talk ? my skype is ankushkumawat
-
-
Stupothead
Permalink to comment#
Hi, I have come across a issue where negative Z-Index does not work on IOS ipad 4. Its real bummer as it used to send a fullscreen BG to the back of my template which is useful as I dont have to assign Z-Index to all the other elements. Does any one know a suitable solution, maybe iOS as some of its own special commands which is the trend these days.? Cheers.
Reply
-
Abhinav
Permalink to comment#
@Toby: Thanks mate :) Little things :)
Reply
-
Tahmid
Permalink to comment#
Z-index is new to me. Still I am not so clear about it. Can you please help me by giving some examples. Does it work in iOS also?
Reply
-
arush
Permalink to comment#
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}This is a heading
Because the image has a z-index of -1, it will be placed behind the text.
-
-
akshay
Permalink to comment#
Z-index is one of the most important css property of element, when overlaying one component over other. Thanks. Nice information
Reply
-
Rex
Permalink to comment#
thanks for your life saving teachings! you have rescued me from being drowned!
Reply
-
braders
Permalink to comment#
I spent an hour trying to figure this out, and the information was here. Your amazing
Reply
-
Salman
Permalink to comment#
thanks. your comment saved me from googling
Reply
-
Vaibhav
Permalink to comment#
Thanks for the info!! really helpful!!
Reply
-
sk
Permalink to comment#
#border { width:250px; height:350px; background:url('border.png') no-repeat; margin:auto; position:relative;}.picture { position:relative; z-index:100; }Not Working
Reply
-
md
Permalink to comment#
its working to me !!
-
manoj
Permalink to comment#
This code is not working because your all element position is relative. you should try parents position is relative and child position is absolute. this code is absolutely work.
This is paragraph
p is parent and img is child .
-
-
ktian
Permalink to comment#
cool responsive website :D
keep it upReply
-
Internet Marketing
Permalink to comment#
So this is good knowledge, but it would make this article really useful if you showed how to get the “CHILD” to stack above the “NOT CHILD”, while still remaining a child of the green element.
Reply
-
Nazmul Hasan
Permalink to comment#
Nice article boss…
Reply
-
Atul
Permalink to comment#
Hi all
Please let know is it good to give z-index:1000 and above ?
Atul Bhalerao
Reply
-
Chris Coyier
Permalink to comment#
I wrote a bit about that here: https://css-tricks.com/rational-z-index-values/
-
-
Joseph OLeary
Permalink to comment#
Was using this technique and got hung up by an overflow: hidden; being applied by bootstrap.
Reply
-
srikanth
Permalink to comment#
superb visual examples, i tried its working “z-index:2;”
Reply
-
Shah
Permalink to comment#
Thanks a lot. After struggling for 12 hours I finally solved it with your help.
Thanks A lot….
Reply
-
dago
Permalink to comment#
Hi Cris! Here one more interesting thing how OPACITY can change positioning. http://codepen.io/dagolinuxoid/pen/GJgBaK
Reply
-
daGo
Permalink to comment#
I wrote Chris without “h” – can’t believe it)) … sorry.
-
rmastro
Permalink to comment#
THANK YOU this worked for me! I removed the opacity from the container and the h1 text appeared – awesome.
-
-
Alka Jain
Permalink to comment#
I have a site – http://www.couponcandy.in/ where my menu has a category which is going under my adsense ad while i mouse hover on it. any help would be great
Reply
-
Shemaya
Permalink to comment#
Thank you! was realy helpfull
Reply
-
kenneth
Permalink to comment#
Thanks! finally my problem solve … :D
Reply
-
vijendhar
Permalink to comment#
I want to place the address on the google maps in my website with z-index can any one help me
Reply
-
Devendra Gawande
Permalink to comment#
It help me allot to improve my my skills OyoRooms coupon code
Reply
-
Usma Islam
Permalink to comment#
very nice ! thank you so much :)
Reply
-
fazal
Permalink to comment#
Big Data is a combination of online running applications on a huge scale built of (something of value) hardware. It helps in storing and handling huge amounts of data in a faster and Big data QA Tester training (producing a lot for a given amount of money) manner. Big Data QA Tester Engineer role extends to different domains when the organization chooses to change a little and get better itself to an improved technology. In Big data QA tester engineers (check for truth/prove true) , the successful processing of (trillion bytes) of data using (something of value) group and other supportive parts/pieces. It demands a high level of testing skills as the processing is very fast. It involves checking different (features/ qualities/ traits) like being like other people, (quality of being very close to the truth or true number), (making copies of something/more than one person or company doing the same thing), (state of always working or appearing the same way), (something is truly what it claims to be), data completeness, etc. Big Data QA Tester Training course are designed to test and fix errors from Hadoop Project’s Performance.
Reply
-
Les Vaillantes
Permalink to comment#
How do I get my MailChimp Pop up to overlay page content?
I am trying to get the MailChimp newsletter pop up to lay on top of the logo and nav bar, but as is it gets caught behind the two, making it ineffective.
Can someone help me with code so that the newsletter pop up lays on top of the page content?I’ve already tried this CSS:
.mc-modal-bg { z-index: 99995 !important; }
.mc-modal { z-index: 99999 !important; }But it’s not working.
Also, all the articles’ features images are overlapping (on both desktop and mobile),
The homepage is now a total mess as we can only see a few images (because they others are hidden behind),Thank you very much for your help!
Les vaillantes
http://www.lesvaillantes.comReply
-
Geoff Graham
Permalink to comment#
Hey Les! You may need to add
position: relative;or something to that effect.z-indexrequires the element’s position to be explicitly declared in the ruleset.
-
-
lesvaillantes
Permalink to comment#
Hello Geoff!
Thank you for your prompt feedback! How do I do that?
I have little knowledge about CSS …Thank you!
Reply
-
Geoff Graham
Permalink to comment#
Something like this:
.mc-modal-bg {
position: relative;
z-index: 99995 !important;
}One thing to consider is that MailChimp’s CSS might not be directly overridden if you’ve embedded the modal using a script they provided.
-
-
Marcos Laredo
Permalink to comment#
My question is… how can I say… strange… This website shows a autocomplete component build out by an input, a dataList and a select components…
At the chrome devTools I wrapped it on a div with a low height and overflow hidden in all directions then clicked at the input field and tah-dah!! It goes over everything…
Set the browser window to a very low height and again clicked at the input… for my surprise it got over the browser address bar and favorites…. How is it possible? Is it possible to get close with CSS? Is that because the web browser sets the pure html elements at the window in a peculiar way?
Pictures: wrapped div, over DevTools, over Browser Elements
Thank you!Reply
