The source for this interactive example is stored in a GitHub repository. 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. Examples might be simplified to improve reading and basic understanding. Definition and Usage. z-index. You could go one step further and set position: relative and a lower z-index on the cat elements, just to be extra safe..content__block { position: relative; z-index: 2; } .cat-top, .cat-bottom { position: relative; z-index: 1; } Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or position: sticky). z-index only affects elements that have a position value other than static (the default).. The compatibility table in this page is generated from structured data. . And the lesson to learn is that you should beware of entering too large values for the z-index property because they wrap around. Sorry if that makes it more difficult to review the code. The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. My tests show that z-index: 2147483647 is the maximum value, tested on FF 3.0.1 for OS X. I discovered a integer overflow bug: if you type z-index: 2147483648 (which is 2147483647 + 1) the element just goes behind all other elements. Current example on MDN Proposed, interactive example Unfortunately, my linter added 4-space indents to the html that wasn't indented already.

La propriété z-index définit le « z-order » (NdT : « ordre z » n'est pas usité) d'un élément positionné et de ses éléments fils ou de ses éléments flexibles (les enfants d'un élément avec display: flex).Lorsque des éléments se chevauchent, le z-order détermine l'ordre des différentes couches que formeront les éléments. 这个和咱们平时开发的表现是一致的。但是请注意z-index:auto和z-index: 0;的层级。他实际上是在inline水平元素的上面，因为定位元素，以及上面所列出来的css3的标签，很多都是默认的z-index: auto; 所以上上个例子中，绝对定位的元素，始终会覆盖其inline-block元素。 If you'd like to contribute to the interactive examples project, please clone Get the latest and greatest from MDN delivered straight to your inbox.The newsletter is offered in English only at the moment. My adjacent block level elements sit on new lines below me. This updates the interactive demo for the z-index page.

W3Schools is optimized for learning, testing, and training. 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. An element with greater stack order is always in front of an element with a lower stack order.The numbers in the table specify the first browser version that fully supports the property.If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail: The solution to this is to set position: relative and explicitly set z-index on at least the white block. Sign in to enjoy the benefits of an MDN account. Elements can overlap for a variety of reasons, for instance, relative positioning has nudged it over something else. If you haven’t already created an account, you will be prompted to do so after signing in. If you'd like to contribute to the data, please check out While using this site, you agree to have read and accepted our It is meant to somewhat mirror the current example on the z-index page.
I am a basic block level element.

The source for this interactive example is stored in a GitHub repository. Closes #554
At least the browser doesn't crash.

Overlapping elements with a larger z-index cover those with a smaller one.