One problem encountered in the project development process, the use of layer display pop-up, pop-up box inside the label set position: fixed display position is positioned from the pop-up position, rather than the position of the screen viewport (viewport) to locate.
After an investigation found that the original layer added to the pop-up box layui-anim class, so class style used to set the transform effect of animation.
position: fixed positioning error reason: When the position: fixed elements, ancestor elements if it is not present transform value none, then the element will be positioned with respect to the set of transform ancestor elements.
Why is there cases:
1. Any non-transform to none value will result in a stacking context (Stacking Context) and create a block containing (Containing Block) is.
2. Since the stack creating a context, the fixing element can affect the positioning of its children. Set position: fixed sub-elements will not be based on the viewport orientation, but on the parent element.
Solution:
1. set transform none
2. the use position: fixed element placed outside transform is not none
In addition to the transform does not lead position where none: fixed offset display elements, there are other patterns can also result in the following three ways that will position: fixed offset positioning:
1.transform attribute value is not an element none
2.perspective element value is not none
3. specify arbitrary CSS properties will-change in
Summary: The current development process discovery led to position: fixed positioning of dislocation are mainly css3 lead to new properties.