解决CSS属性position:fixed不起作用
解决CSS属性position:fixed不起作用
赵彤刚
发布于 2022-12-13 09:46:31
发布于 2022-12-13 09:46:31
代码可运行
文章被收录于专栏：互联网+
运行总次数：0
代码可运行
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属性效果恢复，顶部导航栏重新出现。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2022-12-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
