×

小记fixed定位异常

96
liujunyan
2017.02.07 22:20* 字数 133

设置了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

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

技术文档
Web note ad 1