position: fixed;
2018-01-04 本文已影响0人
康乐芳华
这是 fixed 在 MDN 里面的文档；
不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。打印时，元素会出现在的每页的固定位置。fixed 属性会创建新的层叠上下文。当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。
现在有这样的一段 HTML 结构
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
我希望 <footer> 是固定定位的的 position: fixed; width: 100%; 当 body 的宽度没有限制的时候是没有问题的， 但是加以限制， 比如最大的宽度是 780px 的时候 <footer> 就会在右侧溢出来 这里的宽度没有跟随 body 变动， 而是整个文档的宽度, 把代码里的注释消掉就会发现这种变化. 元素在固定定位之后， 不加方位属性限定， 默认是贴在最上, bottom top left 以及 right 属性的值具体是多少由父元素决定. 元素的 100% 宽度并非是相对于父元素， 而是相对于整个文档而言。
那么如何调整固定定位元素的宽度？ 可以给该元素的父元素加 transform 非 none 的值。比如 scale(1) , 但是这样的话， fixed 就只去了本身的意义， 变得跟 absolute 一样，简直蛋疼， 还不如直接用绝对定位。jsbin 的代码在这儿 Here
。 所以第二个方案就是用 js 把元素的宽度直接赋值
