最近遇到一个有意思的现象，以下 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. 解决ThinkPad x1 发热的问题

    F1进入BIOS界面 将intel speedstep设置为禁用 将CPU Power Manager设置为禁用 重启电脑 电脑不再发热

  2. android 连接USB按power键锁屏2声锁屏音

    alps\frameworks\base\packages\Keyguard\src\com\android\keyguard\KeyguardViewMediator.java #1384 行左右: ...

  3. matplotlib 可视化 —— cmap（colormap）

    color example code: colormaps_reference.py - Matplotlib 2.0.0 documentation 由其文档可知,在 colormap 类别上,有如 ...

  4. Android 开发者工具

    30多个Android 开发者工具 文中部分工具是收费的,但是绝大多数都是免费的. FlowUp 这是一个帮助你跟踪app整体性能的工具,深入分析关键的性能数据如FPS, 内存, CPU, 磁盘, 等 ...

  5. 小强的HTML5移动开发之路（24）—— PhoneGap Android开发环境搭建

    有关JDK及Android开发环境的搭建请看我前面的博文:http://blog.csdn.net/dawanganban/article/details/9748497 一.下载PhoneGap 下 ...

  6. 学习鸟哥的Linux私房菜笔记（5）——目录

    一.目录 目录在文件类型上用d来表示,用 / 分割目录层 Linux操作系统 都有且仅有一个起始目录,我们用一个单独的 /来表示,称其为根目录. 对每一个Shell和操作环境,都有一个当前的工作目录. ...

  7. js判断两个时间段是否有交集

    //判断两个时间是否有交集 function isDateIntersection(start1, end1, start2, end2) { var startdate1 = new Date(st ...

  8. 【50.49%】【codeforces 731B】Coupons and Discounts

    time limit per test1 second memory limit per test256 megabytes inputstandard input outputstandard ou ...

  9. Android推送服务——百度云推送

    一.推送服务简介 消息推送,顾名思义,是由一方主动发起,而另一方与发起方以某一种方式建立连接并接收消息.在Android开发中,这里的发起方我们把它叫做推送服务器(Push Server),接收方叫做 ...

  10. 记录一下go web 文档

    https://github.com/astaxie/build-web-application-with-golang