最近遇到一个有意思的现象，以下 demo 中 fixed 的元素没有相对 viewport 定位，而是相对于它的父元素进行定位。

<html>

　　<head>

　　<style>

　　　　.parent {

　　　　　　width: 200px;

　　　　　　height: 300px;

　　　　　　background: yellow;

　　　　　　transform: scale(1);

　　　　　}

　　　　.fixed {

　　　　　　position: fixed;

　　　　　　left: 0;

　　　　　　right: 0;

　　　　　　bottom: 0;

　　　　　　background: red;

　　　　}

　　　</style>

　　</head>

　　<body>

　　　　<div class='parent'>

　　　　parent

　　　　　　<div class='fixed'>fixed</div>

　　　　</div>

　　</body>

</html>

　　

在 w3c 中对 position: fixed 的[定义](https://www.w3.org/TR/css-position/#fixed-pos)如下：

Fixed positioning is similar to absolute positioning. The only difference is that for a fixed positioned box, the containing block is established by the viewport.

大概意思就是，fixed 元素的块级格式上下文 Block Formatting Context（BFC） 由 viewport 创建，也就是fixed 元素的 BFC 包含在根元素的 BFC 里。

那以上 demo 的表现就说不过去了。为什么呢

transform 遇上 position: fixed的更多相关文章

  1. 当锚点定位遇上position: fixed

    <!DOCTYPE html><html> <head> <title>当锚点定位遇上position: fixed</title> < ...

  2. ios上position:fixed失效问题

    手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="ma ...

  3. 父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效

    今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点 ...

  4. 苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法

    在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...

  5. ios position:fixed 上滑下拉抖动

    ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...

  6. 移动端采坑：Position: fixed 在Safari上的Bug

    Position: fixed 在IOS上的显示效果 会出现两种情况: 点击fixed定位的元素会出现fixed定位失效导致的元素贴向底部,即position: absolute,bottom: 0p ...

  7. Swift Tips - 当 Swift 遇上 CocoaPods

    CocoaPods 作为 iOS 开发的包管理工具,几乎成为了 Objective-C 的行业标准.它为我们提供了非常方便的包管理功能.而苹果正式发布 Swift 语言也已经有半年多时间了,Swift ...

  8. 不受控制的 position:fixed

    本文为纯理论文章,没有 Demo,没有配图,可能会略微枯燥. 大家都知道,position:fixed 在日常的页面布局中非常常用,在许多布局中起到了关键的作用.它的作用是: position:fix ...

  9. position:fixed not work？

    问题 在position:fixed的使用中,突然发现某个操作之后,fixed定位的位置变了?? bottom:0,left:0.本来应该在最下面,结果跑没影了. wtf?position:fixed ...

随机推荐

  1. 妈蛋：kinMaxShow轮播图异常，WebUploader图片上传坑爹，图片被压缩了

    今天晚上在改造轮播图. 原来的代码是这样的: <div> <img src="${static}/image/index/banner/`.jpg" /> ...

  2. 移动端UI界面设计：APP字体排版设计的七个原则

    移动端UI界面设计:APP字体排版设计的七个原则 发布于: 2015 年 2 月 9 日 by admin 再来谈移动端APP字体排版设计,也许有人会说,这个还有什么好说的呢?但是真正能够运用好APP ...

  3. 安装绿色版mysql小记（5.7.11）

    平时使用oracle,感觉太耗我电脑内存了,实在不想用oracle做平时练习了,那就只装一个客户端,工作用..平时自己试试mysql吧..mysql的安装真麻烦,真不是傻瓜式安装就能用,稍微配置不对就 ...

  4. Visual Studio Debugger

    Visual Studio Debugger中七个鲜为人知的小功能   Visual Studio debugger是一个很棒的调试工具,可以帮助程序猿们快速地发现和解决问题.这里给大家简单介绍一下V ...

  5. sklearn 特征降维利器 —— PCA & TSNE

    同为降维工具,二者的主要区别在于, 所在的包不同(也即机制和原理不同) from sklearn.decomposition import PCA from sklearn.manifold impo ...

  6. Linux环境编写脚本安装配置JDK,Tomcat，含Tomcat自启动

    mkdir /usr/java mkdir /znywImage cp -f /usr/jdk-7u79-linux-x64.tar.gz /usr/java tomcatPath=/usr/apac ...

  7. ES6与React中this完全解惑

    计划写很长的篇幅,预计12月初完成. 这篇文章涉及的知识较多,可能一次消化不了,可以渐渐来. 先说结论: 无论是ES6还是React的this,相对于ES5,只是增加了箭头函数this绑定了其封闭上下 ...

  8. android studio中文乱码各种情况的解决办法

    情况一:编辑器内的中文注释乱码. 解决办法:在界面的右下角找到 UTF-8 ,单击之,在弹出的列表中选中GBK 在弹出框内选中Reload 总结:导致这样的原因是你这个.java文件本身是GBK编码的 ...

  9. Java InputStream、String、File相互转化 --- good

    String --> InputStreamByteArrayInputStream stream = new ByteArrayInputStream(str.getBytes()); Inp ...

  10. template.js小小说明

    教程 template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果. 简介 主 ...