position:fixed 小纪

mdn上关于这个属性的介绍是这样的

不为元素预留空间,而是通过指定圆度相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变
当元素祖先的transform属性非none时,容器有视口改为改祖先

例子1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{width: 200px;height: 200px;margin: 100px;background:#ddd;}
        a{position: fixed;left:0;top: 0;}
    </style>
</head>
<body>
    <div>
        <a href="">123</a>
    </div>
</body>
</html>
现在a标签是相对于viewport来计算位置的

例子2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{width: 200px;height: 200px;margin: 100px;background:#ddd;transform: scale(1);}
        a{position: fixed;left:0;top: 0;}
    </style>
</head>
<body>
    <div>
        <a href="">123</a>
    </div>
</body>
</html>
现在a标签是相对于这个div来计算位置

经过试验:will-change在指定css属性也和transform会有同样的效果

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浮动定位 BFC 边距合并 浮动元素 div的顺序是HTML代码中div的顺序决定的。 浮动可以理解为让某个div...
    nianxiaoge阅读 4,014评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 本文为纯理论文章,没有 Demo,没有配图,可能会略微枯燥。大家都知道,position:fixed在日常的页面布...
    __越过山丘__阅读 4,342评论 1 2
  • 想必大多数人都经历过类似的事:上学时是不是每个假期都信心满满地给自己计划了各项任务,工作后每年的年度计划12345...
    d4c5d9bde238阅读 1,666评论 0 0
  • 以前玩匿名聊天社交工具时,时不时地会发些自己的自拍照,发完之后就会遭遇两极评价,有些人会说:“这姑娘真好看啊!”但...
    逗妞日记阅读 4,987评论 0 1

友情链接更多精彩内容