热搜：编程 Python Microsoft 编程语言 C++

记录CSS中 position:fixed 踩的坑

发布时间：2022-12-31 22:25:35 来源：网络

.

不要沮丧，不必惊慌，做努力爬的蜗牛或坚持飞的笨鸟，我们试着长大，一路跌跌撞撞，然后遍体鳞伤。坚持着，总有一天，你会站在最亮的地方，活成自己曾经渴望的模样。

在 html 页面的css样式中，如果将 position 属性的值设置为 fixed，那就表示其元素的位置相当于显示设备的可视区域进行定位，而今天在调试此属性时，却发生了一件奇怪的事件。

position:fixed 定位失效情况复现

失效代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    body{
        height: 150%;
        width: 100%;
        transform: translate(0, 0);
    }
    div{
        position: fixed;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 200px;
        margin: -100px 0 0 -50px;
        background-color: brown;
    }
</style>
<body>
    <div></div>
</body>
</html>

代码动行结果：

QQ截图20191014234509.jpg

注意：

1、代码的样式是规定DIV元素模块，在浏览器的可视窗口中，上下左右居中

2、实际的显示效果，DIV模块已经向上偏移

position:fixed 定位问题解决方法

通过排查代码，可以发现，在 body 样式属性中，有个 transform: translate(0, 0) 属性，去掉此属性后，position:fixed 定位问题解决

修复后的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    body{
        height: 150%;
        width: 100%;
    }
    div{
        position: fixed;
        left: 50%;
        top: 50%;
        width: 100px;
        height: 200px;
        margin: -100px 0 0 -50px;
        background-color: brown;
    }
</style>
<body>
    <div></div>
</body>
</html>

代码运行结果：

QQ截图20191014235319.jpg