详解如何解决position:fixed固定定位偏移问题_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

问题

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固定定位偏移内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!


  • 本文相关:
  • css 同级元素position:fixed和margin-top共同使用的问题
  • css中position:fixed实现div在窗口上下左右居中
  • css中position:fixed实现div居中上下左右居中
  • position:fixed或absolute时百分比参考屏幕宽度
  • 使用position:fixed属性让div居中
  • ie6下实现position:fixed效果实例介绍
  • ie6 position:fixed bug (固定窗口方法)
  • ie6 position:fixed解决方案
  • 解决ie6下position:fixed问题
  • ie7下当position:fixed遇到text-align:center的解决方法
  • css,我用fixed定位一个div,可用笔记本看他就往左...
  • 在CSS中固定定位的问题
  • header的css中加入position:fixed这句,导航栏就错...
  • css 的position问题!高手来
  • css怎样将div固定在网页上 (就是怎样使用 positio...
  • css中fixed定位,如何使它永远居中不动
  • HTML代码中如何用POSITION属性来固定一个DIV模块的...
  • css中不用fixed 怎么把导航固定位置
  • CSS3的transform 导致顶部固定的 position: fixed;...
  • position:fixed的css靠右对其的问题,具体如下
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程position:fixedcss 同级元素position:fixed和margin-top共同使用的问题css中position:fixed实现div在窗口上下左右居中css中position:fixed实现div居中上下左右居中position:fixed或absolute时百分比参考屏幕宽度使用position:fixed属性让div居中ie6下实现position:fixed效果实例介绍ie6 position:fixed bug (固定窗口方法)ie6 position:fixed解决方案 解决ie6下position:fixed问题 ie7下当position:fixed遇到text-align:center的解决方法 css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字详解如何解决position:fixed固定定位偏移问题使用纯 css 实现滚动阴影效果探索css属性*-gradient的实用价值css仿苹果平滑开关按钮效果css实现弹窗上下左右居中且背景透明锁定窗口效果css 利用 position + margin 实现固定盒子横向纵向居css 鼠标悬浮在图片上添加遮罩层效果的实现总结下常用的nth-child选择符 css3简易切割轮播图的实现代码table表格使用:nth-child()实现隔行变色与对齐
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved