提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Java

当前栏目

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

2023-02-18 16:26:49 时间

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属性效果恢复，顶部导航栏重新出现。

相关文章