百度程序员研发避坑指南（前端篇）
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbOibIXTXBqhPnia0z9gIDfNLYC4kp4aRibPz1OKGzTrCsY1aQT8yotbC71icR9aT2jorS2YzsIicDNPcEicg/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"></p><span style="color: black;"><span style="color: black;">平常</span>工作<span style="color: black;">研发</span>中，遇到<span style="color: black;">那些</span>坑是让你印象深刻且<span style="color: black;">拥有</span>挑战的，它们是怎么产生的，<span style="color: black;">咱们</span>该<span style="color: black;">怎样</span>避免？本期<span style="color: black;">咱们</span>带来与前端<span style="color: black;">研发</span><span style="color: black;">关联</span>的三个问题：一次网页资源加载问题的定位过程；CSS中的z-index层叠覆盖问题；CSS3 transform 属性对 position 的影响，<span style="color: black;">期盼</span>能为你的技术<span style="color: black;">提高</span>助力。</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">01</span></strong></span></p><span style="color: black;"><strong style="color: blue;"><span style="color: black;">一次网页资</span></strong></span><span style="color: black;"><strong style="color: blue;"><span style="color: black;">源加载问题的定位过程</span></strong></span><span style="color: black;">今天讨论的<span style="color: black;">专题</span>比较聚焦，<span style="color: black;">便是</span>有用户报Web页面资源或局部区域加载不出来的问题，该<span style="color: black;">怎样</span>查？又该<span style="color: black;">怎样</span>避免？</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">1.1 问题描述</strong></span></p><span style="color: black;">用户反馈页面内的<span style="color: black;">举荐</span>列表加载不出来，<span style="color: black;">况且</span>能稳定复现。</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">1.2 分析</strong></span></p><span style="color: black;"><span style="color: black;">第1</span>反应<span style="color: black;">便是</span>自己复现，<span style="color: black;">然则</span>不行啊，团队<span style="color: black;">无</span><span style="color: black;">朋友</span>能复现，<span style="color: black;">亦</span><span style="color: black;">没法</span>接触到用户。<span style="color: black;">那样</span>先理清楚此区域的实现逻辑，该区域的HMTL虽然<span style="color: black;">已然</span>下载，但默认不可见，而是依赖c.js（文件名简化了）展现。基于此，<span style="color: black;">咱们</span><span style="color: black;">可疑</span>：</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">c.js 以及其依赖的a.js, b.js等 加载非常慢或直接失败；</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">c.js 以及其依赖<span style="color: black;">规律</span><span style="color: black;">出现</span>JS<span style="color: black;">反常</span>。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">1.3 监控实现</strong></span></p><span style="color: black;"><span style="color: black;">那样</span>该<span style="color: black;">怎样</span>佐证，<span style="color: black;">咱们</span>需要做下监控。</span><span style="color: black;">做监控需要<span style="color: black;">思虑</span>到<span style="color: black;">实质</span>场景，<span style="color: black;">因为</span>Head和Body都有外链请求，<span style="color: black;">因此呢</span>监控代码要置于顶部且内联，且代码要精简，从而<span style="color: black;">能够</span>最大程度拿到信息和减少首屏影响。</span><span style="color: black;"><span style="color: black;">window</span>.addEventListener(<span style="color: black;">error</span>, <span style="color: black;"><span style="color: black;">event</span> =></span> {</span><span style="color: black;"> <span style="color: black;">if</span> (event.srcElement !== <span style="color: black;">window</span>) {</span><span style="color: black;"> <span style="color: black;">console</span>.log(<span style="color: black;">资源加载失败，加载资源的元素是：</span>, event.srcElement);</span><span style="color: black;"> send();</span><span style="color: black;"> }</span><span style="color: black;"> <span style="color: black;">else</span> {</span><span style="color: black;"> <span style="color: black;">console</span>.log(<span style="color: black;">JS报错：</span>, event.message);</span><span style="color: black;"> send();</span><span style="color: black;"> }</span><span style="color: black;">}, <span style="color: black;">true</span>);</span><span style="color: black;"><span style="color: black;">window</span>.addEventListener(<span style="color: black;">unhandledrejection</span>, <span style="color: black;"><span style="color: black;">event</span> =></span> {</span><span style="color: black;"> <span style="color: black;">const</span>error = event.reason || {};</span><span style="color: black;"> <span style="color: black;">console</span>.log(<span style="color: black;">JS报错：</span>, error);</span><span style="color: black;"> send();</span><span style="color: black;">});</span><span style="color: black;"><span style="color: black;">以上</span><span style="color: black;">能够</span>监控到全局的 资源加载失败 和 JS<span style="color: black;">反常</span>，<span style="color: black;">包含</span>未<span style="color: black;">捕捉</span>的Promise Rejection。<span style="color: black;">另外</span>，还需定位资源，<span style="color: black;">经过</span>向上遍历获取元素的XPath，XPath上带上id或class属性，避免全都是`div>div>div>div`，而摸不着头脑。</span><span style="color: black;">上线后<span style="color: black;">发掘</span>，有不少错误都是script error，这是<span style="color: black;">由于</span>外链JS都是CDN域名。浏览器<span style="color: black;">针对</span>脚本执行遵守 same-origin policy ，为避免域名信息泄漏给宿主域名，特意<span style="color: black;">隐匿</span>错误信息。</span><span style="color: black;"><span style="color: black;">处理</span><span style="color: black;">方法</span>是给所有外链JS加上响应头。</span><span style="color: black;"><span style="color: black;">access-control-allow-origin</span>: *</span><span style="color: black;">JS资源若托管在云上CDN服务，<span style="color: black;">那样</span>其CDN<span style="color: black;">掌控</span>台都会<span style="color: black;">供给</span><span style="color: black;">增多</span>Header功能。</span><span style="color: black;">若是自有服务，就需要主动设置Header。<span style="color: black;">这儿</span>假设<span style="color: black;">运用</span>Koa2 框架，设置如下：</span><span style="color: black;">ctx.<span style="color: black;">set</span>(<span style="color: black;">Access-Control-Allow-Origin</span>, <span style="color: black;">*</span>);</span><span style="color: black;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">而后</span>给所有该CDN域名的script元素<span style="color: black;">增多</span>crossorigin属性，如：</p>
</span><span style="color: black;"><span style="color: black;"><<span style="color: black;">script</span> <span style="color: black;">src</span>=<span style="color: black;">"https://cdn.a.com/static/a.js"</span> <span style="color: black;">crossorigin</span>=<span style="color: black;">"anonymous"</span>></span><span style="color: black;"></<span style="color: black;">script</span>></span></span><span style="color: black;">但<span style="color: black;">发掘</span>其在Chrome浏览器是生效的，<span style="color: black;">能够</span>拿到真实错误堆栈。可惜，Safari浏览器不支持此机制，依然只能拿到script error。为了Safari拿到真实错误，外链需要是同域。<span style="color: black;">因此呢</span>有个办法是在www.a.com的Nginx做一层代理转发，即 https://www.a.com/static/a.js 转发到 https://cdn.a.com/static/a.js 。<span style="color: black;">不外</span>如此一来，就丧失CDN就近<span style="color: black;">拜访</span>的<span style="color: black;">优良</span>，不适合常态化。但<span style="color: black;">能够</span>在定位用户问题时，将用户<span style="color: black;">拜访</span>临时切换成 https://www.a.com/static/a.js。</span><span style="color: black;">那<span style="color: black;">怎样</span>监控加载慢，<span style="color: black;">能够</span>在onload事件后获取慢资源。</span><span style="color: black;"><span style="color: black;">const</span> <span style="color: black;">list</span> = performance.getEntriesByType(<span style="color: black;">resource</span>);</span><span style="color: black;"><span style="color: black;">const</span> len = <span style="color: black;">list</span>.length;</span><span style="color: black;"><span style="color: black;">const</span> slowList = [];</span><span style="color: black;"><span style="color: black;">for</span> (let i = <span style="color: black;">0</span>; i < len; i++) {</span><span style="color: black;"> <span style="color: black;">const</span> timing = <span style="color: black;">list</span>;</span><span style="color: black;"> <span style="color: black;">// 大于1s</span></span><span style="color: black;"> <span style="color: black;">if</span> (timing.duration > <span style="color: black;">1000</span>) {</span><span style="color: black;">slowList.push(timing);</span><span style="color: black;"> }</span><span style="color: black;">}</span><span style="color: black;">send(slowList);</span><span style="color: black;">上报信息<span style="color: black;">亦</span><span style="color: black;">包括</span>了<span style="color: black;">每一个</span>请求的TCP、下载等耗时，<span style="color: black;">仔细</span>可见Resource_Timing_API规范</span><span style="color: black;">（https://developer.mozilla.org/en-US/docs/Web/API/Resource_Timing_API/Using_the_Resource_Timing_API）</span><span style="color: black;">。</span><span style="color: black;">要<span style="color: black;">重视</span>的是，该API信息受到CORS </span><span style="color: black;">（https://developer.mozilla.org/en-US/docs/Glossary/CORS）</span><span style="color: black;">影响，必须给资源设置如下响应头<span style="color: black;">才可</span>拿到数据，否则<span style="color: black;">非常多</span>字段取值都是0。</span><span style="color: black;">Timing-Allow-Origin<span style="color: black;">: *</span></span><span style="color: black;"><span style="color: black;">经过</span>分析这些数据，<span style="color: black;">咱们</span><span style="color: black;">能够</span><span style="color: black;">晓得</span>资源耗时过程，<span style="color: black;">这儿</span><span style="color: black;">能够</span>充分参照Chrome<span style="color: black;">研发</span>者工具<span style="color: black;">供给</span>的Timing子面板，<span style="color: black;">认识</span>关键时段耗时。<span style="color: black;">例如</span>同域名6个并发请求限制，若资源请求较多，则可能<span style="color: black;">处在</span>stalled（挂起等待）状态。这些<span style="color: black;">周期</span>可能<span style="color: black;">原由</span>分析参考Chrome说明</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">。</p><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8Cv39Ba7x35icAQFeOHibiceibQPvHFrwtfyekJjpkoBXhva6AOYtwoQYFS4xJjQhkV4rqia1FF8CPnag/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;"><span style="color: black;">因为</span>有些<span style="color: black;">照片</span>在页面内<span style="color: black;">欠好</span>确定位置，<span style="color: black;">因此呢</span>需要获取其XPath，<span style="color: black;">怎样</span>获取呢？<span style="color: black;">针对</span>img标签加载<span style="color: black;">照片</span>，<span style="color: black;">能够</span>快速获取：</span><span style="color: black;"><span style="color: black;">// timing.name<span style="color: black;">便是</span>资源<span style="color: black;">位置</span>，适合</span></span><span style="color: black;"><span style="color: black;">const</span> img = <span style="color: black;">document</span>.body.querySelector(<span style="color: black;">img</span>);</span><span style="color: black;"><span style="color: black;">const</span> xpath = getxpath(img);</span><span style="color: black;">额外信息获取，其实除了问题信息本身外，用户当时环境信息非常重要，如</span><span style="color: black;">1. performance.memory：获取内存<span style="color: black;">运用</span>信息；</span><span style="color: black;">2. navigator.connection：用户连接<span style="color: black;">状况</span>，可惜，此API不怎么准；</span><span style="color: black;"><span style="color: black;">倘若</span>是APP内页面，<span style="color: black;">能够</span>调用端能力获取到用户网络类型、网速。</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">1.4 数据分析</strong></span></p><span style="color: black;">上线后，用户依然<span style="color: black;">拜访</span>慢。<span style="color: black;">按照</span>日志<span style="color: black;">发掘</span>，用户未有JS报错，但<span style="color: black;">按照</span>慢资源日志，<span style="color: black;">发掘</span>有<span style="color: black;">海量</span>资源加载超过1s，有些资源<span style="color: black;">乃至</span>达到10s，其花费在建连<span style="color: black;">周期</span>耗时<span style="color: black;">很强</span>。看来问题还不是这么简单，那<span style="color: black;">怎样</span>解释用户资源加载如此慢？用户所在局域网环境差？接入运营商质量差？插件影响？CDN问题？</span><span style="color: black;">这些问题<span style="color: black;">仅有</span>CDN<span style="color: black;">能够</span>去排查，<span style="color: black;">咱们</span><span style="color: black;">首要</span>拿到用户<span style="color: black;">拜访</span> https://www.a.com 的服务器端日志，获取到用户IP。联合云CDN服务，<span style="color: black;">按照</span>用户IP，竟然未查到任何CDN<span style="color: black;">拜访</span>日志。但从日志看，用户确实请求了<span style="color: black;">海量</span>JS，并不是<span style="color: black;">所有</span>本地缓存。<span style="color: black;">因此</span>用户IP可能不是<span style="color: black;">拜访</span>CDN的IP，有一种<span style="color: black;">状况</span>是<span style="color: black;">运用</span>代理。</span><span style="color: black;"><span style="color: black;">因此</span>想<span style="color: black;">经过</span>其他信息捞取用户的CDN日志，来确定<span style="color: black;">拜访</span>CDN的IP。思路是<span style="color: black;">根据</span>用户UA、请求<span style="color: black;">位置</span>等非精确信息捞取CDN日志，但<span style="color: black;">因为</span>捞取日志量非常大，<span style="color: black;">没法</span>确定<span style="color: black;">那些</span>日志是该用户的；而：</span><span style="color: black;">1.CDN域名<span style="color: black;">通常</span>是无cookie域名，<span style="color: black;">无</span>TRACEID；</span><span style="color: black;">2.Web页面<span style="color: black;">没法</span>给script/link资源请求头设置Traceid；</span><span style="color: black;">3.前端<span style="color: black;">日前</span><span style="color: black;">没法</span>拿到CDN TCP建连IP；</span><span style="color: black;">综上，除了用户IP，种种精确定位信息都无效。<span style="color: black;">因此呢</span>这一步举步维艰。</span><span style="color: black;">好在能联系上用户，咨询<span style="color: black;">是不是</span><span style="color: black;">运用</span>代理，结果：确实<span style="color: black;">运用</span>了代理，且<span style="color: black;">按照</span>用户代理，实测代理非常慢，<span style="color: black;">乃至</span>加载超时，其代理请求走了香港服务器。<span style="color: black;">经过</span>代理出口IP，<span style="color: black;">最后</span>从海外CDN捞取到了用户<span style="color: black;">拜访</span>日志。<span style="color: black;">同期</span><span style="color: black;">亦</span>确认，用户将所有 *.a.com 请求配置不使用代理，<span style="color: black;">因此</span>服务端能拿到的IP是用户IP，而CDN拿到的是代理出口IP。</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;">1.5 总结</strong></span></p><span style="color: black;">Web能力终是有限，但<span style="color: black;">经过</span>足够的辅助信息，以及全链路协作，在定位Case过程中<span style="color: black;">亦</span>会事半功倍。该Case虽然归因于用户不<span style="color: black;">恰当</span>代理配置，但<span style="color: black;">亦</span>可基于此场景做技术优化。如任何首屏内容不依赖外链展现，减少核心<span style="color: black;">规律</span>JS体积，<span style="color: black;">增多</span>资源缓存率等。</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">02</span></strong></span></p><span style="color: black;"><strong style="color: blue;"><span style="color: black;">CSS中的z-index层叠覆盖问题</span></strong></span>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">2.1 含义</span></strong></span></h2><span style="color: black;">z-index属性指定了元素及其子元素的【z<span style="color: black;">次序</span>】，而【z<span style="color: black;">次序</span>】<span style="color: black;">能够</span>决定当元素<span style="color: black;">出现</span>覆盖的时候，哪个元素在上面。<span style="color: black;">一般</span>一个<span style="color: black;">很强</span>的z-index值的元素会覆盖较低的那一个。</span><strong style="color: blue;"><span style="color: black;">属性指定两件事：</span></strong><span style="color: black;">当前元素的堆叠<span style="color: black;">次序</span></span><span style="color: black;">当前元素<span style="color: black;">是不是</span><span style="color: black;">创立</span>新的堆叠上下文</span>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;">2.2 属性值</strong></span></h2><span style="color: black;">默认值：z-index:auto;</span><span style="color: black;">整数值：z-index:<integer>;</span><span style="color: black;">继承：z-index:inherit;</span>
<h2 style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><strong style="color: blue;">2.3 基本特性</strong></span></h2><span style="color: black;">在CSS2.1时代，需要和定位元素<span style="color: black;">协同</span><span style="color: black;">运用</span>；</span><span style="color: black;"><span style="color: black;">倘若</span>定位元素z-index<span style="color: black;">无</span><span style="color: black;">出现</span>嵌套(并列的)：</span><span style="color: black;">后来者居上的准则；</span><span style="color: black;">哪个大哪个上（z-index<span style="color: black;">体积</span>比较）；</span><span style="color: black;"><span style="color: black;">倘若</span>定位元素z-index<span style="color: black;">出现</span>嵌套：</span><span style="color: black;">祖先优先原则（前提：z-index是数值，不是auto）</span><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8Cv39Ba7x35icAQFeOHibiceibK8SoqTeWPZz7DKJgibUaqvgYgJdw4XU3lDwchWxtLGHqjnibRgvx9o6w/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><strong style="color: blue;"><span style="color: black;">以上为z-index的基本介绍。</span></strong><span style="color: black;">当业务越来越<span style="color: black;">繁杂</span>，多种弹窗、toast、浮层<span style="color: black;">各样</span>组件，多人协同业务<span style="color: black;">研发</span>的<span style="color: black;">状况</span>下：</span><span style="color: black;">老业务写了个z-index：5000；</span><span style="color: black;">B<span style="color: black;">朋友</span>调用一个全局弹层，<span style="color: black;">本来</span>设置为100，想要覆盖全局，z-index改为10000；</span><span style="color: black;">C<span style="color: black;">朋友</span>调用一个toast，<span style="color: black;">本来</span>设置为2000，想要覆盖弹层，z-index改为100000；</span><span style="color: black;">...</span><span style="color: black;">层层覆盖的<span style="color: black;">状况</span>下，<span style="color: black;">不可</span>无限改下去，为了避免<span style="color: black;">这般</span>的<span style="color: black;">状况</span><span style="color: black;">出现</span>，减少<span style="color: black;">持续</span>覆盖的<span style="color: black;">状况</span>，<span style="color: black;">那样</span>应该<span style="color: black;">怎样</span>规定z-index的值呢；</span>
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;"><span style="color: black;">const</span> KEY = <span style="color: black;">_tbv_z_index_</span>;</span><span style="color: black;"><span style="color: black;"><span style="color: black;">function</span> <span style="color: black;">initZIndex$</span>() </span>{</span><span style="color: black;"> <span style="color: black;">return</span> (<span style="color: black;">window</span> = <span style="color: black;">10000</span>);</span><span style="color: black;">}</span><span style="color: black;"><span style="color: black;">// 初始化，只能被调用一次</span></span><span style="color: black;"><span style="color: black;"><span style="color: black;">function</span> <span style="color: black;">once</span>(<span style="color: black;">fn</span>) </span>{</span><span style="color: black;"> <span style="color: black;">const</span> flag = <span style="color: black;">true</span>;</span><span style="color: black;"> <span style="color: black;">return</span> <span style="color: black;"><span style="color: black;">function</span> () </span>{</span><span style="color: black;"> <span style="color: black;">if</span> (flag) {</span><span style="color: black;"> flag = <span style="color: black;">false</span>;</span><span style="color: black;"> <span style="color: black;">const</span> args = <span style="color: black;">Array</span>.prototype.slice.call(<span style="color: black;">arguments</span>, <span style="color: black;">0</span>);</span><span style="color: black;"> fn.apply(args);</span><span style="color: black;"> }</span><span style="color: black;"> };</span><span style="color: black;">}</span><span style="color: black;"><span style="color: black;">const</span> initZIndex = once(initZIndex$);</span><span style="color: black;"><span style="color: black;">// <span style="color: black;">外边</span>调用&支持重置</span></span><span style="color: black;"><span style="color: black;"><span style="color: black;">function</span> <span style="color: black;">zIndex$</span>(<span style="color: black;">zIndex</span>) </span>{</span><span style="color: black;"> <span style="color: black;">if</span> (zIndex) {</span><span style="color: black;"> <span style="color: black;">return</span> (<span style="color: black;">window</span> = zIndex);</span><span style="color: black;"> }</span><span style="color: black;"> <span style="color: black;">return</span> (<span style="color: black;">window</span> += <span style="color: black;">1</span>);</span><span style="color: black;">}</span><span style="color: black;"><span style="color: black;">// 组件mount时触发+1</span></span><span style="color: black;"><span style="color: black;">const</span> zIndex = zIndex$();</span></div><span style="color: black;"><strong style="color: blue;"><span style="color: black;"><span style="color: black;">重视</span>：</span></strong></span><span style="color: black;">还是要规范z-index的配置，不要乱用<span style="color: black;">乱用</span>随意赋值，<span style="color: black;">按照</span>依赖规则<span style="color: black;">恰当</span><span style="color: black;">运用</span>；</span>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><strong style="color: blue;"><span style="color: black;">03</span></strong></span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;"><span style="color: black;">CSS3 transform 属性对 position 的影响</span></strong></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">CSS3中引入了transform，定义了在二维或三维空间中元素的旋转、缩放、平移等<span style="color: black;">行径</span>，还能利用合成层原理开启GPU加速，<span style="color: black;">提高</span>页面动画的流畅度。然而transform<span style="color: black;">亦</span>不是「省油的灯」（并<span style="color: black;">无</span>说它<span style="color: black;">欠好</span>的意思，我就很<span style="color: black;">爱好</span>它），<span style="color: black;">加强</span>了页面交互效果的<span style="color: black;">同期</span>它<span style="color: black;">亦</span>有<span style="color: black;">有些</span>「副<span style="color: black;">功效</span>」容易让人踩坑。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">position: fixed 实现了固定定位的效果，元素不追随滚动条进行滚动，普通元素的overflow属性<span style="color: black;">亦</span><span style="color: black;">没法</span>对其进行裁剪，<span style="color: black;">因此呢</span>在<span style="color: black;">有些</span>需要固定头部、固定悬浮按钮的场景中<span style="color: black;">非常</span>好用。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">但fixed遇上transform时表现的就<span style="color: black;">再也不</span><span style="color: black;">那样</span>「强硬」，反而退化<span style="color: black;">成为了</span>position: absolute的效果。在外层<span style="color: black;">无</span>transform影响时，固定定位元素的<span style="color: black;">包括</span>块是根元素，<span style="color: black;">能够</span>近似认为是<html>元素，<span style="color: black;">因此呢</span>fixed元素<span style="color: black;">能够</span>实现相对视口定位的效果。而当元素设置了transform时，便会创建一个新的<span style="color: black;">包括</span>块(containing block)，<span style="color: black;">倘若</span>该元素的内部有元素设置了fixed定位，<span style="color: black;">那样</span>该fixed元素的<span style="color: black;">包括</span>块便<span style="color: black;">再也不</span>是根元素，而变<span style="color: black;">成为了</span>被设置了transform的元素。<span style="color: black;">倘若</span>在<span style="color: black;">研发</span>过程中<span style="color: black;">发掘</span>设置了position:fixed的元素随着页面滚动了，就<span style="color: black;">能够</span>看下fixed的元素外层<span style="color: black;">是不是</span>有元素设置了transfrom。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">除了<span style="color: black;">包括</span>块之外，transform还会生成新的层叠上下文（stack context）,使得元素内部和<span style="color: black;">外边</span>的z-index相互独立，<span style="color: black;">显现</span>低z-index元素层级比高z-index元素还高的<span style="color: black;">状况</span>：</span></p><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO8Cv39Ba7x35icAQFeOHibiceibZfr0iaTNwhxxpPYuwDSeqxEMszQOJgXxLwgn98h4075vopDr7Mg8C8Q/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;"><span style="color: black;">举荐</span>阅读：</span></p>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;">百度工程师教你快速<span style="color: black;">提高</span><span style="color: black;">开发</span>效率小技巧</span></a></h1>
<h1 style="color: black; text-align: left; margin-bottom: 10px;"><a style="color: black;"><span style="color: black;">百度一线工程师浅谈日新月异的云原生</span></a></h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">【技术加油站】揭秘百度智能测试规模化落地</span></a></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><a style="color: black;"><span style="color: black;">【技术加油站】浅谈百度智能测试的三个<span style="color: black;">周期</span></span></a></p><img src="https://mmbiz.qpic.cn/mmbiz_png/5p8giadRibbO9x9T3iaxknhz6B4v4PPxvGEAlXibefUzgTftSnnT6QficHvz0w4T1CtHpDD8ZDU7NiaAjkHFssZN9IYA/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" style="width: 50%; margin-bottom: 20px;"><span style="color: black;">一键三连，好运连连，bug不见</span><span style="color: black;"> 百度seo优化论坛 http://www.fok120.com/ 请问、你好、求解、谁知道等。 外链发布论坛学习网络优化SEO。
页:
[1]