What nobody told you about z-index in the article “What nobody told you about z-index”
Almost two years ago, the article “ What no one told you about z-index ” (and its translation on Habré “ What nobody told you about z-index ”) was published, the authors of which tell about the little-known ( 76% of Habr's users who heard about this for the first time ), but the documented ability to create a new context overlay by specifying an
opacity less than one.But despite the title of the article, the authors did not tell you about something else.
It is assumed that you are familiar with the concept of overlay context.
Elements with common parents moving to the foreground or background together are known as the overlay context . Understanding the context of the overlay is the key to understanding the- From the article “ What nobody told you about the z-index ”. To understand the topic, I strongly recommend that you either get acquainted with her or the classic work on MDN .z-indexand the order of the overlay elements.
')
Each overlay context has its root element in the HTML structure. At the time of the formation of a new context on the element, all the child elements also fall into this context and take their place in the overlay order. If an element is located at the very bottom of a single overlay context , then it will not be possible in any conceivable and inconceivable way to display it over another element in the adjacent overlay context , which is higher in the hierarchy, even with thez-indexequal to a million.
New context overlay is formed in the following cases:
- The root element (
) . , ( ), .) . , ( ), .
An element with apositionother thanstaticand az-indexvalue different fromauto. In addition to one exception forposition: fixed, but I made it in a separate paragraph.
The element has anopacityvalue less than1.
A flex element with az-indexvalue other thanauto, even in the case ofposition: static.
Transformed elements:transformvalue other thannone;transform-stylewithpreserve-3dvalue ; andperspectivewith a value other thannone.
CSS Regions: setting aflow-fromvalue other thannonefor an element withcontentother thannormal.
Paged Media: each Page-Margin Box sets its own overlay context .
Finally, the point for which I am writing this article is that WebKit-based mobile browsers, as well as Google Chrome 22+, always create a new overlay context forposition: fixedelements, even withz-index: auto!
, but I did not find comments from Microsoft representatives and their position on this issue is incomprehensible. I did not have the opportunity to test the behavior on Windows Phone and find out if it matches the behavior on the Desktop. I would be grateful if someone will share the result of the experiment.
In any case, the W3C provides only recommendations, and each vendor decides for himself whether to follow them or not. We, the simple developers, can only take into account similar nuances in their web applications (well, that one corporation with a well-known product has been hardening us for years).
Thank you for attention!
Source: https://habr.com/ru/post/225721/
All Articles