在 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

position:fixed 定位出错的原因

关于此问题的出现,牵涉到了堆叠上下文人概念 (Stacking Context)。

堆叠上下文,是 HTML 元素的三维概念,这些 HTML 元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的 z 轴上延伸,HTML 元素依据其自身属性按照优先级顺序占用层叠上下文的空间。

1、任何非 none 的 transform 值都会导致一个堆叠上下文创建。

2、由于堆叠上下文的创建,该元素会影响其子元素的固定定位。设置了 position:fixed 的子元素将不会基于 可视窗口定位,而是基于这个父元素。