最近遇到一个有意思的现象，以下 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. 阿里云域名和ip绑定步骤

    阿里云域名和ip绑定步骤 一.总结 一句话总结:域名转IP信息存在所在地运营商那,比如电信联通等. 1.给域名添加对应ip的过程叫做什么? 域名解析 2.域名解析中的记录代表什么意思,记录值呢? 记录 ...

  2. 数据预处理（normalize、scale）

    matlab 工具函数(三)-- normalize(归一化数据) 注:待处理的数据 X∈Rd×N,N 表示样本的个数,d 则是单个样本的维度: 1. 去均值(remove DC) X = bsxfu ...

  3. 机器学习：Softmax Classifier (两个隐含层)

    程序实现 softmax classifier, 含有两个隐含层的情况.activation function 是 ReLU : f(x)=max(0,x) f1=w1x+b1 h1=max(0,f1 ...

  4. centos7 rabbitmq安装/配置

    原文:centos7 rabbitmq安装/配置     因为RabbitMQ是由erlang实现的,所以要先安装erlang再安装rabbitMQ   1.先配置yum软件源地址EPEL(EPEL是 ...

  5. css中背景 字体 文体属性练习

    @charset "utf-8"; body{ background-color:#332244;/*//背景颜色*/ background-image:("../kk. ...

  6. 垃圾回收GC:.Net自己主动内存管理 上(三)终结器

    垃圾回收GC:.Net自己主动内存管理 上(三)终结器 垃圾回收GC:.Net自己主动内存管理 上(一)内存分配 垃圾回收GC:.Net自己主动内存管理 上(二)内存算法 垃圾回收GC:.Net自己主 ...

  7. python request 代理/超时/证书

    import requests headers = { "User-Agent": "Mozilla/5.0 (Windows NT 6.1; Win64; x64) A ...

  8. win10 支持默认把触摸提升鼠标事件 打开 Pointer 消息

    原文:win10 支持默认把触摸提升鼠标事件 打开 Pointer 消息 在 WPF 经常需要重写一套触摸事件,没有UWP的Pointer那么好用. 如果一直都觉得 WPF 的触摸做的不好,或想解决 ...

  9. 度小于所述过程：KanboxEnt.exe

    在防火墙管理.见未知的过程"KanboxEnt.exe" 程序信息: 版权声明:本文博主原创文章.博客,未经同意不得转载.

  10. css 单选框 样式 填充自定义背景 after

    input[type='radio'] //width 16px //height 16px display none //input[type='radio']:chcked // backgoun ...