网络运营 > 服务器 > Linux

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

112人参与2021-01-05

问题

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

<body>
  <div class="container">
  </div>    
</body>    
<style>
  .container{
    width: 100px;
    height: 100px;
    background: #888;
    position: fixed;
    top: 100px;
    left: 100px;
  }
</style>

当父级元素设置transform之后

<body>
    <div class="bfc-box">
      <div class="container"></div>
    </div>
</body>
<style>
  .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;
  }
</style>

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下:

<body>
  <div class="bfc-box"></div>
  <div class="container">
  </div>    
</body>    

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

<div ref="container" class="container"></div>
mounted(){
  document.body.append(this.$refs['contaier'])
}

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

您对本文有任何疑问!!点此进行留言回复

推荐阅读

猜你喜欢

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

01-05

Fedora Linux怎么设置自动清空回收站的时间?

01-07

Linux大型网站高并发架构及自动化运维项目

12-31

从头开始学Docker(一)Docker入门

12-31

编程这工作究竟是在干什么?

12-30

Linux下为主机创建虚拟端口并选择特定端口发送数据---以mininet下的SDN网络架构模拟为例

12-31

拓展阅读

大家都在看

windows10 更新Ubuntu20.04 LTS的方法步骤

06-14

Ubuntu 安装cuda10.1驱动的实现步骤

07-31

详解shell中脚本参数传递的两种方式

11-21

详解shell中脚本参数传递的两种方式

11-21

CentOS7运行.sh脚本提示syntax error: unexpected end of file的解决方法

05-12

shell命令实现当前目录下多个文件合并为一个文件的方法

03-19

Linux查找处理文件名后包含空格的文件(两种方法)

11-25

Apache FlinkCEP 实现超时状态监控的步骤详解

03-09

热门评论