最近遇到一个有意思的现象，以下 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. Redis的增删改查、持久化你会了吗

    原文:Redis的增删改查.持久化你会了吗 Redis是用C语言实现的,一般来说C语言实现的程序"距离"操作系统更近,执行速度相对会更快. Redis使用了单线程架构,预防了多线程 ...

  2. QPalette实例教程（QWidget自带的颜色设置工具，对Window的各个部分都可设置颜色）

    QPalette是一款非常好用的颜色设置工具: 头文件:#include <QPalette> (^-^我没有用这个头文件也可以使用QPalette) 常用函数: void setBrus ...

  3. CEO 系列之一：如何当好创业公司 CEO？（不要用战术的勤奋掩盖战略的懒惰，在创业过程中，最核心问题，就是能把创业情怀变成具体问题。这个问题越具体越好）

    1. 创业公司要先定一个目标,要善于把目标简化, 分解成一个, 一个更具体,更简单的问题2. 针对简单的问题进行聚焦, 做深做强3. 在做的过程中, 把断地推出自己的产品到市场上去试错, 要用事实来证 ...

  4. 01_Git的安装和简单使用（命令行模式+图形化模式）

      刚开始用git的小白适用,参考链接:http://www.cnblogs.com/qijunjun/p/7137207.html  实际项目开发中,我们经常会用一些版本控制器来托管自己的代码,今天 ...

  5. Oracle数据库零散知识06 -- Package的定义与简单触发器

    CREATE OR REPLACE PACKAGE pak_02 IS--包头 --这里可定义公共参数 FUNCTION fun_01 RETURN NUMBER; PROCEDURE pro_01 ...

  6. 一题多解（五） —— topK（数组中第 k 大/小的数）

    根据对称性,第 k 大和第 k 小,在实现上,是一致的,我们就以第 k 小为例,进行说明: 法 1 直接排序(sort(A, A+N)),当使用一般时间复杂度的排序算法时,其时间复杂度为 O(N2) ...

  7. iOS CALayer使用

    CALayer使用 iOS的设备中,我们之所以能看到各种各样的控件.文字.图片,都是Core Animation框架的功劳.它通过图层的合成,最终显示在屏幕上.而今天这篇文章讲的就是Core Anim ...

  8. C# WPF 低仿网易云音乐（PC）Banner动画控件

    原文:C# WPF 低仿网易云音乐(PC)Banner动画控件 由于技术有限没能做到一模一样的动画,只是粗略地做了一下.动画有点生硬,还有就是没做出网易云音乐的立体感.代码非常简单粗暴,而且我也写有很 ...

  9. Wireshark非标准分析port无流量

    Wireshark非标准分析port无流量 2.2.2  非标准分析port无流量Wireshark非标准分析port流量 应用程序执行使用非标准port号总是网络分析专家最关注的.关注该应用程序是否 ...

  10. iOS8的APP过渡过程

    1. 2. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWluX3hpYW53ZWk=/font/5a6L5L2T/fontsize/400/fill/ ...