postionfixed固定_详解如何解决position:fixed固定定位偏移问题

问题

css固定定位position:fixed很容易使用，就是相对浏览器的viewport进行定位，top:0;left:0就是在左上角。

.container{

width: 100px;

height: 100px;

background: #888;

position: fixed;

top: 100px;

left: 100px;

}

当父级元素设置transform之后

.BFC-box{

margin:200px;

height: 200px;

width: 200px;

border:2px solid red;

transform: scale(1);

}

.container{

width: 100px;

height: 100px;

background: #888;

position: fixed;

top: 100px;

left: 100px;

}

fixed元素变成了相对父元素进行定位。

真是令人蛋疼，原因在于transform提升了元素的地位，在W3C规范中有如下说明：

For elements whose layout is governed by the CSS box model, any value other than none for the transform also causes the element to become a containing block, and the object acts as a containing block for fixed positioned descendants

在transform不为none的元素中，定位是会受到影响的。

解决方案

在不影响布局的情况下，可以直接把要定位的元素移动到body下:

如果是在组件中不方便对元素进行操作，可以使用js，以vue为例:

mounted(){

document.body.append(this.$refs['contaier'])

}

到此这篇关于详解如何解决position:fixed固定定位偏移问题的文章就介绍到这了,更多相关position:fixed固定定位偏移内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

postionfixed固定_详解如何解决position:fixed固定定位偏移问题相关推荐

css鼠标拖拉卡顿_详解overflow-scrolling解决滚动卡顿问题
前言如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象.但是在android系统的手机上则不会出现该问题. 解决方法以下代码可解 ...
python爬取小说出现乱码_详解Python解决抓取内容乱码问题（decode和encode解码）
一.乱码问题描述经常在爬虫或者一些操作的时候,经常会出现中文乱码等问题,如下原因是源网页编码和爬取下来后的编码格式不一致二.利用encode与decode解决乱码问题字符串在Python内部的 ...
cors数据类型_详解如何解决CORS账号连接RTK无法获得固定解的问题
在日常RTK测量的应用中,时常会出现无固定解的情况,导致测量测绘工作无法按时完成或者测量测绘结果精度无法保证. 如果你购买网络的是RTK,进行RTK配套CORS账号进行测量工作时,教你仪器操作使用的人 ...
flex 底部固定_详解八种方法实现CSS页面底部固定
当我们在写页面时经常会遇到页面内容少的时候,footer会戳在页面中间或什么?反正就是不在最底部显示,反正就是很难看,下面要讲的布局就是解决如何使元素粘住浏览器底部, 方法一:footer高度固定+绝 ...
python3读文件中文_详解Python3解决读取中文文件txt编码的问题
import jieba import jieba.analyse from matplotlib import pyplot as plt from scipy.misc import imread ...
cors账号登录显示服务器错误,详解如何解决CORS账号连接RTK无法获得固定解的问题...
原标题:详解如何解决CORS账号连接RTK无法获得固定解的问题在日常RTK测量的应用中,时常会出现无固定解的情况,导致测量测绘工作无法按时完成或者测量测绘结果精度无法保证. 如果你购买网络的是RTK ...
python gil 解除_详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
先看一道GIL面试题: 描述Python GIL的概念, 以及它对python多线程的影响?编写一个多线程抓取网页的程序,并阐明多线程抓取程序是否可比单线程性能有提升,并解释原因. GIL:又叫全局解 ...
CentOS 8虚拟机下设置固定IP详解
面临的问题:每次电脑重启,打开虚机IP地址都会发生变化搜索了下面的文章, 我的环境: 虚机镜像:CentOS 8, 网络链接方式:NAT模式虚拟机:VMware Workstation 16 Pr ...
PHP开发中常见的安全问题详解和解决方法
PHP开发中常见的安全问题详解和解决方法参考文章: (1)PHP开发中常见的安全问题详解和解决方法 (2)https://www.cnblogs.com/walblog/articles/83313 ...

postionfixed固定_详解如何解决position:fixed固定定位偏移问题

postionfixed固定_详解如何解决position:fixed固定定位偏移问题相关推荐

最新文章

热门文章