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 在捣乱。

再看看 w3c 对 transform 的[定义]():

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.

  

大概意思就是,transform 属性使元素创建了**新的 BFC,所有**的子元素都被包含在这个新的 BFC 内。那么设置了 position: fixed 的子元素 BFC 被包含在了 transform 元素的 BFC 里。

BFC 和定位有什么关系呢,继续翻 w3c,有段关于 BFC 的[定义](https://www.w3.org/TR/css-position/#def-cb):

The position and size of an element’s box(es) are sometimes computed relative to a certain rectangle, called the containing block of the element.

  

元素的位置和尺寸是相对于一个确定的 BFC 计算的。

所以 demo 展示的 fixed 元素位置是根据它所在的 BFC 计算的。

原文地址:https://www.cnblogs.com/xxhuan/p/11030244.html

时间: 2024-10-08 18:37:11

transform 遇上 position: fixed的相关文章

ios上position:fixed失效问题

手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="main_comment">```````````````````</div> <div class="commentBar">回复框</div> .main_comment{ width: 100%; position: absolute;

父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效

今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点B使用了position:fixed进行了定位,按照常理节点B应该悬挂在浏览器窗口视图上,不会跟随滚动条而滚动的,但是这个效果在Chrome浏览器下面是无效的,经过测试在IE11.Firefox.safari中均没有问题,在Opera中出现的效果和Chrome中完全一样. 总结一下:在Chrome和

关于position:fixed在ios上通用的解决方法

最近在项目中 总是遇到一些奇奇怪怪的css样式问题,在网上找了一大堆方法 都没什么用, 最后仔细思考了之后发现,并不是没用,而是适应条件不一样,话不多说直接进入主题. 假如你的项目需要滚动的地方上一层有很多个div包着,并且也有position:fixed的div包着 还有一堆烂七八糟的css样式,这时你想滚动的那个页面本来是有顶部固定或者是底部固定,到后面都会随着页面一起滚动,在ios上会这样,安卓却不会,解决方法其实很简单,把需要滚动的部分用一个div包起来 然后也fixed就可以了. 例如

解决ios、微信移动端的position: fixed; 支持性不好的问题 &amp;&amp; 禁用下拉暴露黑底的功能

解决ios.微信移动端的position: fixed; 支持性不好的问题 在chrome中的多个部分使用了position: fixed之后,都可以正常的布局,但是放在微信上却出现了不能正常显示的问题(第一个问题). 并且使用了postion: fixed; 的一个种类名称栏在微信下下滑不了,而body是可以的,确实让人很郁闷(第二个问题). 对于第二个问题,我们可以采取的方式是使得微信不能下滑暴露出 powered by ... 的字样. 但是对于第一个问题,确实没有很好的解决方法. 所以就

position:fixed之safari的坑

mobile开发如今已经越来越步入正规,很多问题也得到了各大浏览器厂商的支持和修正,比如今天要说的ipone下的fixed,如今Safari也的得到了支持,不过却还有些比较坑得地方. 今天要说得这个坑是关于safari全屏模式,当页面进入全屏模式(向下滚动以后页面默认会进入全屏模式)时页面底部就不可交互,看起来好像事件失效了一样,这个是时候窗口底部的任何工具栏,链接或者通过fixed底部固定的工具栏等等都没法点击了,这时点击只会触发Safari退出全屏得动作,然后调出Safari 工具栏,需要再

利用transform的bug使fixed相对于父级定位

首先,大家都清楚,元素使用fixed之后,若不设置top与left则会相对于最近的使用定位的父元素,并位于父元素的原点位置设置top与left值时,则会相对于窗口定位.但无论如何,此时仍相对于窗口定位,在此不过多描述. 今天发现的是当某一元素使用transform属性后,其所有使用fixed定位的子元素的fixed属性都会失效.此处可查看W3C文档https://www.w3.org/TR/css-transforms-1/#issue-ca2c412c 因此可以利用此bug时fixed元素相对

解决IOS safari在input focus弹出输入法时不支持position fixed的问题

该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position:fixed的支持不是很好(在IOS5之前甚至还不支持position:fixed).我遇到的其中一个问题就是,在iOS6+环境下,input focus弹出输入法的时候,设置了position fixed的input框浮在页面上了,而不是吸附在软键盘上.效果如图(图片来源于网上): 而Androi

安卓自带浏览器 position:fixed时 图片模糊问题

最近遇到一个问题:给一个div做position:fixed时,div里的图片在小米1s自带浏览器里面图片显示模糊了,而其它浏览器图片都是清楚的(说明:已经是2倍的图片了).代码如下: <div class="position:fixed">     <img src="xxx"> </div> 只要将posiiton:fixed去除时,图片又是清晰的.经过一方排插和google,确定该问题是andorid自带浏览器bug,在po

解决 IE6 position:fixed 固定定位问题

实现<div id="ad"></div>固定在窗口左下角 一般的 position:fixed; 实现方法#ad{ position:fixed; bottom:0; left:0px;} 在 IE6 中实现 position:fixed; 的办法#ad{ position:fixed; bottom:0; left:0px; _position:absolute; _bottom:auto; _top:expression(eval(document.doc