解决CSS属性position:fixed不起作用

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; 
}

子元素表现如下： 

视图来自红白机游戏盒

 可见，position:fixed属性失效，顶部导航栏消失。

2.当我们移除了父元素中transform相关属性后，子元素表现如下：

视图来自红白机游戏盒

  可见，position:fixed属性效果恢复，顶部导航栏重新出现。