position:fixed是生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
但是,有一种情况例外:
若父元素设置了transform属性,无论transform设置任何属性值,都会导致position:fixed属性失效!
具体如下:
1.当我们在父元素设置了如下css属性时 :
body {
/*设置透明度*/
opacity: 1;
/*设置旋转角度*/
transform: rotateX(0deg);
/*设置2s内逐渐变透明并旋转*/
-moz-transition: opacity 2s ease-out, transform 2s ease;
-webkit-transition: opacity 2s ease-out, transform 2s ease;
-ms-transition: opacity 2s ease-out, transform 2s ease;
transition: opacity 2s ease-out, transform 2s ease;
}
子元素表现如下:
![子元素表现](https://i-blog.csdnimg.cn/blog_migrate/1d4fda2a23a25cda6c75b803d5eed796.png)
可见,position:fixed属性失效,顶部导航栏消失。
2.当我们移除了父元素中transform相关属性后,子元素表现如下:
![视图来自红白机游戏盒](https://i-blog.csdnimg.cn/blog_migrate/88dbb74b4ba5c0f1c85d5d35e0e05329.png)
可见,position:fixed属性效果恢复,顶部导航栏重新出现。