Project scenario ：

Project scenario ： In the project fixed Positioning failure

Problem description

as long as position:fixed; Elemental The parent element has transform style , So this element's fixed Positioning will fail ; Whether it's transform:translate(),scale() still rotate().

<div style='transform:translate3d(0,0,0)'>
    <div style='position:fixed;top:0;left:0;'></div>
</div>

In the above code position:fixed It will fail .

Cause analysis ：

We should all know ,position:fixed You can make elements scroll without following the browser's scroll bar , And this following effect even its brothers position:relative/absolute There's no limit . however , It's really one thing, one thing ,position:fixed The fixed effect is small transform To kill , Directly downgrade to position:absolute Egg pain .

Solution ：

TIP： Be careful , This feature shows , At present only Chrome browser /FireFox Under Browser ,IE browser , Include IE11, fixed still fixed The performance of the

So it is not recommended to use , For another implementation dom Way ！

expand

CSS3 transform For ordinary elements N Multi render effects

• transform Raise the vertical position of the element
• transform Limit position:fixed Follow effect of
• transform change overflow Yes absolute The limitation of elements
• transform Limit absolute Of 100% Width size