Home > Developer > JavaScript
Problem: When the fixed element is included by another fixed element, the position of the fixed sub-element in chrome will be affected by the parent element.
Demo (http://jsbin.com/qumah/1 ):
<!DOCTYPE html>
IE (IE8-IE11 effects are consistent, IE7 is not tested, IE6 does not support fixed elements) under the effect:
Chrome:
Firefox:
Safari:
Explanation: the cascading relationship is affected by the cascading context. The cascading context in the document is formed by elements that meet any of the following conditions:
opacityThe property value is less than 1. (refer to the specification for opacity ),position: fixedAlways create a new stack context, even if the value of z-index is "auto"(See this post)Reference Source: The stacking context-MDN
Each cascade context is composed of the following cascade levels (the display order is from the back to the front ):
Reference Source: RM8015: IE6 IE7 IE8 (Q) Positioning element 'z-Index' is the default value. In some cases, a new cascading context is generated.
Conclusion: In Chrome 22 + browsers,When position is fixed, a new overlapping context is always created.Therefore, the child fixed element uses the parent fixed element as the cascade context, and the cascade relationship of the child element is affected by the parent element. In a non-chrome browser, the sub-fixed element does not create a new stack context. The stack context of the fixed element is the closest stack context.
Therefore, we should try to avoid the issue of nesting fixed elements. If Nesting is required, we recommend that you modify the z-index value of the fixed parent element to fix the issue of stacking fixed child elements in chrome.
Digress:
For elements whose opacity is less than 1, the cascading context problem may also occur, which many people may not know. However, the rules are as follows:
Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. for the same reason, implementations must create a new stacking context for any element with opacity less than 1. if an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that wocould be used if it were a positioned element'
z-index: 0And'opacity: 1'. If an element with opacity less than 1 is positioned,'z-index'Property applies as described in [CSS21], doesn't that'autoIs treated'0'Since a new stacking context is always created. see section 9.9 andAppendix E of [CSS21] for more information on stacking contexts. the rules in this paragraph do not apply to SVG elements, since SVG has its own rendering model ([SVG11], Chapter 3 ). --- from CSS Color Module Level 3
To put it simply:
References:
Https://developer.mozilla.org/zh-CN/docs/Web/CSS/Understanding_z-index/The_stacking_context
Http://www.w3.org/TR/CSS21/visuren.html#z-index
Https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index
RM8015: in IE6 IE7 IE8 (Q), the positioning element 'z-Index' is the default value. In some cases, a new cascading context is generated.
Z-index world you need to know
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
