transform 遇上 position: fixed
最近遇到一个有意思的现象,以下 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的更多相关文章
- 当锚点定位遇上position: fixed
<!DOCTYPE html><html> <head> <title>当锚点定位遇上position: fixed</title> < ...
- ios上position:fixed失效问题
手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="ma ...
- 父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效
今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点 ...
- 苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法
在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...
- ios position:fixed 上滑下拉抖动
ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...
- 移动端采坑:Position: fixed 在Safari上的Bug
Position: fixed 在IOS上的显示效果 会出现两种情况: 点击fixed定位的元素会出现fixed定位失效导致的元素贴向底部,即position: absolute,bottom: 0p ...
- Swift Tips - 当 Swift 遇上 CocoaPods
CocoaPods 作为 iOS 开发的包管理工具,几乎成为了 Objective-C 的行业标准.它为我们提供了非常方便的包管理功能.而苹果正式发布 Swift 语言也已经有半年多时间了,Swift ...
- 不受控制的 position:fixed
本文为纯理论文章,没有 Demo,没有配图,可能会略微枯燥. 大家都知道,position:fixed 在日常的页面布局中非常常用,在许多布局中起到了关键的作用.它的作用是: position:fix ...
- position:fixed not work?
问题 在position:fixed的使用中,突然发现某个操作之后,fixed定位的位置变了?? bottom:0,left:0.本来应该在最下面,结果跑没影了. wtf?position:fixed ...
随机推荐
- Windows7系统下安装OpenSSL攻略
Windows7系统下安装OpenSSL攻略 http://blog.chinaunix.net/uid-20479991-id-216269.html http://my.oschina.net/s ...
- AE属性表操作
转自chanyinhelv原文AE属性表操作 实现的操作包括:1.打开属性表:2.编辑属性表:3.增加属性列:4.数据排序:5.字段计算…… 嗯,实现的功能目前就这些吧,后续还会继续跟进,还望大家多多 ...
- MySQL 基础查询
6月业绩榜 名次 伙伴 业绩 签单 面谈 每日目标 1 杜艳花 12367 2 0 查看目标 2 郑东杰 2345 1 0 查看目标 3 黄传龙 345 1 1 查看目标 4 測试 0 0 0 查 ...
- 常用的iOS开发或者优化的小工具
下面介绍一下我常用的iOS开发或者优化的小工具 由于很多工具大多数博客都已经介绍过了,我就列举一些我认为还不错但是大家不常列举的: Crafter https://github.com/krzyszt ...
- zoj 1008 Gnome Tetravex
开放式存储阵列为每平方米有几个,否则,超时-- #include <stdio.h> #include <string.h> #include <iostream> ...
- leetcode先刷_Valid Sudoku
我没有看到这个问题,这使其在现货需求数独,害怕一直没敢做.后来我发现原来的标题就是这么简单.推断现在只有数字全不符合的就可以了棋盘上的形势的要求. 是不是正确的三个周期..人是不能满意地看到每一行.每 ...
- switch语句中default用法详解
当年学C语言switch开关语句的时候,很多人会告诉你它是这么用的: switch(表达式){ case常量表达式1: 语句1;break; case常量表达式2: 语句2;break; - case ...
- gdal库中设置prj4库全路径的用法
作者:朱金灿 来源:http://blog.csdn.net/clever101 gdal库实现投影转换之类的功能实际上底层都是调用prj4库的功能.如果gdal使用非静态的方式集成prj4库,实际上 ...
- android 内存优化 性能优化
最近做一个android 的应用程序 总是出现内存高 和cpu高的问题困扰了好多天. 下面为自己从网上总结的和自己找到的问题. 1. WebView 控件: 使用了 WebView 控件一定要注意清 ...
- phpcms视图查询数据
{pc:get sql="SELECT * FROM phpcms WHERE id in ($id) ORDER BY listorder ASC LIMIT 0, 1--"re ...