transform与position:fixed的那些恩怨
1. 前言
在写这篇文章之前,我理解的fixed元素是这样的:(摘自CSS布局基础)
固定定位与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。
但是直到我看到这篇文章CSS 为什么这么难学?,作者在文章中提到了一个“黑魔法”,如何让fixed元素不再以viewport为定位参考对象,而是以父容器为参考对象。这下子我算是get到了一个技能。唯一不认同作者的是,他提到的CSS“不正交”,不好学,其实我认为根本原因是知识基础不够扎实罢了。凡事都有个原理,不可能无缘无故冒出一个科学解释不了的对象的。
于是这里我们打算以这个知识点为基础,去探讨为什么会这样然后写了一个比较使用的例子,在移动端用的可能会比较多。
2. 为什么fixed元素的父元素加了transform就会以父元素为参考对象?
详细的demo如下:
查看这个demo发现,我们在父元素设置了transform: scale(1);
这个属性,然后其子元素fixed-to-container
便以父元素为参考对象了,而且不再固定在某个地方,而是会随着文档流的流动而流动。
这是为什么呢?
答案在设置了transform
属性的元素上,在W3c文档上transform属性,文档的定义翻译如下:
对于布局受CSS盒子模型控制的元素,transform属性不会影响transformed元素周围的内容流。但是,溢出区域的范围将会考虑上transform元素。这种行为类似于元素通过相对定位发生偏移时的情况。因此,如果overflow属性的值是`scroll`或`auto`的,滚动条将显示为需要看到在可见区域外转换的内容。
对于布局受CSS盒子模型控制的元素,除了配置为`none`之外,其他的`transform`属性值都会创建堆栈上下文。绘制的实现必须在其父栈上下文中它所创建的层中,如果它是带有“z-index: 0”的定位元素,则使用相同的堆叠顺序。如果一个带有`transform`的元素还配置了`position`属性,那么“z-index”属性将按照[CSS2](https://www.w3.org/TR/css-transforms-1/#biblio-css2)描述的被应用,除非“auto”被视为“0”,因为会创建新的堆栈上下文。
对于布局受CSS盒子模型控制的元素,除了配置为`none`之外,其他的`transform`属性值都将导致元素成为一个包含块,而其固定定位的后代元素都是以此object作为他们的包含块。
根元素的[Fixed Backgrounds](https://www.w3.org/TR/css3-background/#fixed0)会受到该元素上配置的transform属性的影响。对于受transform影响的所有其他元素(例如,对它们应用transform属性,或者对它们的任何祖先元素应用transform属性), `background-attachment`属性值为`fixed`的元素会被当做它好像有配置`scroll`属性一样。其他`background-attachment`的计算值不受影响.
在这段介绍中我们发现transform
会对fixed
属性造成影响。具体表现可以看上面的那个demo。
简单来说就是:应用了transform属性的元素会导致该元素形成一个新的包含块,然后其后代元素如果有fixed定位的属性,那么其元素将会以该父元素作为包含块,从而有了之前我们看到的现象。
除了上述说的,我还是发现了另外两个特征:
- fixed元素不在固定在某个位置,失去了fixed元素特有的性质
- fixed元素不会脱离文档流,但是top等属性依然可用。可以看例子中的top属性,配置了top:10px;整个文档流都往下走10px;
3. 真的fixed元素,但是不以viewport为参考
这里说的真的fixed元素,是真的可以固定在某个位置,其他元素可以从其下面穿梭过去。在实际的项目中有一个很常见的需求,如下面的demo:
在demo中,我们点击按钮会弹出一个面板,在面板的最上面会有一个fixed的头部,面板的其他地方可以自由滑动,这种案例相信很多童鞋都会用到。
按照我们之前的说法,形成了这么一个解决方案。
不过不清楚这种做法是否是最佳的?精通CSS的童鞋是否有更好的做法呢?不吝赐教。
transform与position:fixed的那些恩怨的更多相关文章
- transform与position:fixed的那些恩怨--摘抄
1. 前言 在写这篇文章之前,我理解的fixed元素是这样的:(摘自CSS布局基础) 固定定位与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身.由于视图本身是固定的, ...
- 父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效
今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点 ...
- transform 遇上 position: fixed
最近遇到一个有意思的现象,以下 demo 中 fixed 的元素没有相对 viewport 定位,而是相对于它的父元素进行定位. <html> <head> <style ...
- position:fixed失效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 关于position:fixed;的居中问题
通常情况下,我们通过操作margin来控制元素居中,代码如下: #name{ maigin:0px auto; } 但当我们把position设置为fixed时,例如: #id{ position:f ...
- 不受控制的 position:fixed
本文为纯理论文章,没有 Demo,没有配图,可能会略微枯燥. 大家都知道,position:fixed 在日常的页面布局中非常常用,在许多布局中起到了关键的作用.它的作用是: position:fix ...
- 苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法
在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...
- position:fixed not work?
问题 在position:fixed的使用中,突然发现某个操作之后,fixed定位的位置变了?? bottom:0,left:0.本来应该在最下面,结果跑没影了. wtf?position:fixed ...
- position:fixed失效情况
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- JDBC的连接mySql的基本知识
这只是我自己的随笔博客~,用于偶尔回忆知识,可能存在一些错误,如有错误,欢迎指正~ 首先对于JDBC连接MySQL,要了解基本的框架结构 画的比较烂,大约就是这样的结构 然后看一下具体实现的 代码:: ...
- Centos7在运行yum命令时出现报错及排查处理过程
1.1 现象描述 Centos系统在正常重启后,运行yum命令安装软件工具的时候出现以下报错: cannot open Packages index using db5 - Structure ne ...
- Mysql数据库的权限、索引基本操作
数据库的关闭方法: .优雅的关闭数据库的方法: mysqladmin -uroot -p123456 shutdown .脚本关闭: /etc/init.d/mysqld stop .使用kill信号 ...
- php 单冒号 、双冒号的用法
单冒号: 常用与三元运算,如:$result = $str ? $str : $str1; 双冒号: 1,当调用静态属性和静态方法时 2,当调用自身类或者父类的属性或者方法时
- MySQL存储引擎MyISAM与InnoDB的区别比较
使用MySQL当然会接触到MySQL的存储引擎,在新建数据库和新建数据表的时候都会看到. MySQL默认的存储引擎是MyISAM,其他常用的就是InnoDB了. 至于到底用哪种存储引擎比较好?这个问题 ...
- relu函数为分段线性函数,为什么会增加非线性元素
relu函数为分段线性函数,为什么会增加非线性元素 我们知道激活函数的作用就是为了为神经网络增加非线性因素,使其可以拟合任意的函数.那么relu在大于的时候就是线性函数,如果我们的输出值一直是在大于0 ...
- Python入门必学:递归函数正确的操作使用方法,案例详解
递归函数,在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. 举个例子,我们来计算阶乘n! = 1 x 2 x 3 x ... x n,用函数fact(n)表示,可以 ...
- 自动化运维之使用Python3收发电子邮件~~~附源码
一.背景介绍 1.1 一些专业名称的解释 MUA——Mail User Agent,邮件用户代理.是用户与电子邮件系统的交互接口,一般来说它就是我们PC机上的一个程序,提供一个好的用户界面,它提 ...
- A1055 The World's Richest(25 分)
A1055 The World's Richest(25 分) Forbes magazine publishes every year its list of billionaires based ...
- A1065 A+B and C (64bit) (20)(20 分)
A1065 A+B and C (64bit) (20)(20 分) Given three integers A, B and C in [-2^63^, 2^63^], you are suppo ...