解决固定定位position: fixed；变成了绝对定位随屏幕滚动的问题

在一次vue项目开发中发现按钮设置成固定定位后，依旧随屏幕滚动，变成了相对定位的效果。

查阅资料后发现：

父级元素设置有效的transform属性会导致子元素固定变成绝对元素，此时会导致子元素和父级元素相同大小。
此时查看子元素的offsetTop和offsetLeft都是0，需要引起注意。

解决方法：
1.去除父级元素的transform属性。
2.将需要固定定位的元素移动到和含有transform属性的父级元素平级。

解决固定定位position: fixed；变成了绝对定位随屏幕滚动的问题相关推荐

position属性:绝对定位position: absolute；相对定位 position: relative；固定定位 position: fixed；
position 属性: position常见的定位模式: 定位模式描述是否脱离文档流移动模式定位偏移属性 static 默认属性对象遵循常规流不移动不移动 relative 相对定位 ...
跨浏览器的CSS固定定位{position:fixed}
不知道您是否留意了,浏览本站时,浏览器右下角有一个标着top的黑色直角三角形,可以点击它返回到正在浏览的网页页眉.当滚动网页时,它的位置一直没有任何改变,您感觉它怎么样?这就是通过CSS的定位属性{p ...
关于固定定位position: fixed；和横向滚动overflow-x: scroll；无法同时使用的问题
在做项目时遇到一个功能是要把某个盒子固定在底部,并且是要横向滑动的,发现position: fixed;和overflow-x: scroll;同时使用无效,现记录一下解决方法 <style&g ...
CSS 固定定位 position fixed
简单描述:固定定位是将某个元素固定在浏览器的某个确定的位置,不随滚动条的移动而变化: 注意:固定定位的位置是相对当前浏览器窗口的: 代码示例: 1.我们先在页面中输出一个标准情况下的 div ...
postionfixed固定_详解如何解决position:fixed固定定位偏移问题
问题 css固定定位position:fixed很容易使用,就是相对浏览器的viewport进行定位,top:0;left:0就是在左上角. .container{ width: 100px; hei ...
网页定位(position属性、相对定位、绝对定位、固定定位、z-index、设置透明度)
position属性 static:默认值,没有定位 relative:相对定位,相对于自己原来的位置进行偏移 absolute:绝对定位,以它最近一个已经定位的祖先元素为基准进行偏移 fixed:固 ...
CSS中定位（带你实操代码掌握固定定位、绝对定位与相对定位（子绝父相））
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录固定定位绝 ...
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法
相对定位绝对定位固定定位粘性定位居中的三种方法 calc函数标签的使用方法一.相对定位:position:relative; 二.绝对定位:position:absolute; 1.找参照物 ...
CSS-position: fixed固定定位
固定定位 <!DOCTYPE html> <html><head><meta charset="utf-8"><title&g ...

解决固定定位position: fixed；变成了绝对定位随屏幕滚动的问题

解决固定定位position: fixed；变成了绝对定位随屏幕滚动的问题相关推荐

最新文章

热门文章