小记fixed定位异常

设置了transform的父盒子不要包含fixed定位的子元素,以免出现奇怪的问题

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            transform: translateY(10px);
            border: 1px solid red;
            width: 320px;
            height: 320px;
            margin: 100px auto;
        }
        .fixed {
            position: fixed;
            width: 32px;
            height: 32px;
            background: red;
            top: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <div class="box">
        <span class="fixed"></span>
    </div>
</body>
</html>

效果:

Paste_Image.png

如图,fixed定位的span本应相对于窗口定位在右上角,如今却定位在了父元素的右上角,还会随页面滚动而滚动
如果我们去掉父盒子的transform: translateY(10px);,定位就又恢复到我们熟悉的位置啦

Paste_Image.png

开发中遇到的小坑~在此记录一下以便下次查找

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,842评论 1 92
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 1,515评论 0 5
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    Yuann阅读 1,671评论 0 7
  • 关于html静态页面书写的知识点整理 1.web标准:结构,表现,行为 结构(xhtm...
    终相恋阅读 630评论 0 1
  • 文/白澜 每一个人总会有一颗不甘平凡的心。我们总以为自己会撞上了与众不同的那一种生活,但大多数人却只是停留在幻想里...
    维娜陈阅读 829评论 19 22