问题：fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响。

demo（http://jsbin.com/qumah/1）：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <title>JS Bin</title>

  <style>

       .fixed {

         position: fixed;

         left:0;

         top:20px;

         width:200px;

         height:200px;

         background:#fee;

       }

       .fixed-child {

         width:150px;

         height:150px;

         background: #fcc;

         top:40px;

         right: 20px;

         left: auto;

         z-index: 100;

       }

    .absolute {

      position: absolute;

      right: 20px;

      width:100px;

      height:100px;

      background:#f11;

    }

    </style>

</head>

<body>

  <div class="fixed">fixed position<div class="fixed fixed-child">fixed child position</div></div>

  <div class="absolute">absolute position</div>

</body>

</html>

IE（IE8-IE11效果一致，IE7没有测试，IE6不支持fixed元素）下效果：

chrome下效果：

firefox下效果：

Safari下效果：

解释：层叠关系是受层叠上下文影响的。文档中的层叠上下文由满足以下任意一个条件的元素形成：

  • 根元素 (HTML),
  • 绝对（absolute）定位或相对（relative）定位且z-index值不为"auto",
  • z-index不为“auto”的flex列表，
  • 元素的opacity属性值小于1. (参考 the specification for opacity),
  • transform属性值不为“none”，
  • mix-blend-mode属性值不为“normal”，
  • isolation属性值为“isolate”，
  • 在mobile WebKit 和 Chrome 22+内核的浏览器中, position: fixed 总是创建一个新的层叠上下文, 即使z-index的值是"auto" (See this post)，
  • will-change属性值为上述属性名，即使属性值不直接为上述属性名（例如：all）--参见：https://dev.opera.com/articles/css-will-change-property/

参考来源：The stacking context - MDN

每个层叠上下文都有如下的层叠级别组成（显示顺序从后到前）：

  1. 父级层叠上下文的背景和边框；
  2. 层叠级别为负值的层叠上下文（越小越在下）；
  3. 非行内、非定位的子元素；
  4. 非定位的浮动子元素和它们的内容；
  5. 行内非定位子元素；
  6. 'z-index:auto' 的定位子元素，和任何 'z-index:0' 的层级上下文；
  7. 层叠级别为正值的层叠上下文（越大越在上）。

参考来源：RM8015: IE6 IE7 IE8(Q) 中定位元素 'z-index' 为默认值在某些情况下会产生新的层叠上下文

结论：在chrome22+的浏览器中，position为fixed总是会创建新的重叠上下文，所以子fixed元素在此时会以父fixed元素为层叠上下文，子元素的层叠关系会受到父元素的影响。而在非chrome浏览器下子fixed元素并不会创建新的层叠上下文，fixed元素的层叠上下文为最近的层叠上下文。

因此，我们应该尽量避免出现fixed元素相互嵌套的问题。如果必须有嵌套的情况，建议修改fixed父元素的z-index值来修正在chrome下fixed子元素的层叠问题。

题外话：

对于opacity小于1的元素也会产生层叠上下文的问题，可能很多人都不知道。但是规范里面是明文规定的：

Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 andAppendix E of [CSS21] for more information on stacking contexts. The rules in this paragraph do not apply to SVG elements, since SVG has its own rendering model ([SVG11], Chapter 3).          ---摘自《CSS Color Module Level 3》

简单来说：

  • opacity值小于1的元素会创建新的层叠上下文
  • opacity值小于1的元素的层叠级别相当于z-index:0的定位元素。此时设置z-index会失效，除非该元素同时为定位元素
  • opacity值小于1的元素如果同时为定位元素时，则该元素将同时具有定位元素和opacity小于1元素的特性之和。换句话说，就是z-index等于“auto”时会被当成z-index等于“0”时创建新的层叠上下文

参考文章：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Understanding_z-index/The_stacking_context

http://www.w3.org/TR/CSS21/visuren.html#z-index

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index

RM8015: IE6 IE7 IE8(Q) 中定位元素 'z-index' 为默认值在某些情况下会产生新的层叠上下文

你需要了解的z-index世界

当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系的更多相关文章

  1. 当fixed元素相互嵌套时，父元素会影响子元素的层叠关系，最好不要嵌套使用fixed

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. 解释:层叠关系是受层叠上下文影响的.文档中的层叠上下文由满足以下任意一个条件的元素形成: ...

  2. CSS 设置背景透明度，不影响子元素

    由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素． 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...

  3. 【IE6的疯狂之十】父级使用padding后子元素绝对定位的BUG

    在前端开发中,经常会用到css的position:absolute来使层浮动,前通过left,top,right等属性来对层进行定位,但ie6对left,top,right等属性的解释和ie7,ie8 ...

  4. LinearLayout的gravity属性以及其子元素的layout_gravity何时有效；RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制，用RelativeLayout中的gravity无法控制！！！

    LinearLayout的gravity属性以及其子元素的layout_gravity何时有效:RelativeLayout如何调整其子元素位置只能用子元素中的属性来控制,用RelativeLayou ...

  5. html 子元素和父元素都监听了 click 事件，点击子元素时为何先触发的是父元素的 click 事件？

    先上一段代码,点击子元素时先触发的是父元素的 click 事件 <html> <head> <script type="text/javascript" ...

  6. 使用RGBa和Filter实现不影响子元素的CSS透明背景

    点击查看原文 问题 如果我们想要一个元素拥有半透明的背景,我们有两个选择: 使用CSS和 opacity 做一张 24-bit PNG 背景图片 在CSS中使用opacity有两个问题,一是为了适应所 ...

  7. CSS中如何设置父元素透明度不影响子元素透明度

    原因分析: 使用css的opcity属性改变某个元素的透明度,但是其元素下的子元素的透明度也会被改变,即便重定义也没有用,不过有个方法可以实现,大家可以看看. 可以使用一张透明的图片做背景可以达成效果 ...

  8. 改变父元素的透明度，不影响子元素的透明度—css

    1.如果我们给父元素添加opacity:0.4后,子元素的red颜色也变成了0.4的透明度, 例子如下: <!DOCTYPE html> <html> <head> ...

  9. jquery根据(遍历)html()的内容/根据子元素的内容（元素文本）来选择（查询），在子元素前加入元素

    <ul> <li>First</li> <li>second</li> <li>third</li> </ul ...

随机推荐

  1. 深入理解object C中复制对象的用法(二)

    第五.对象的自定义拷贝 对象拥有复制特性,必须实现NSCopying,NSMutableCopying协议,实现该协议的copyWithZone方法和mutableCopyWithZone方法 深拷贝 ...

  2. kindle paperwhite 使用说明

    calibre,eink必备转换软件. easypub,lucida制作的软件,支持txt to epub:txt to mobi,可以实现目录. 售后电话:400 817 0100 正常的设计格式转 ...

  3. MyBatis（1）：MyBatis入门

    MyBatis是什么 MyBatis是什么,MyBatis的jar包中有它的官方文档,文档是这么描述MyBatis的: MyBatis is a first class persistence fra ...

  4. Integer.parseInt()和valueOf()

    parseInt("1")返回的是int类型,所以如果想要将一个String类型的数字串转为原始类型int ,建议使用这个方法, 而不是使用 valueOf("1&quo ...

  5. 一个C++的多态和虚函数实例

    类的说明: code: #include<iostream> #include<string> #define PAI 3.1415926 using namespace st ...

  6. ApiDemos--&gt;Views-lists-slow adapter学习

    今天来依照apidemos提供的方法来实现slow loading的效果. 简单说下实现方法: 实现ListView.OnScrollListener ,监听到手势滑动的情况,当处于滚动状态时,将新显 ...

  7. uva 317 - Hexagon（规律推导）

    题目连接:317 - Hexagon 题目大意:在一个19个六边形组成的图形上玩一个游戏,给出9个数字, 分成3组, 分别可以填在左上角, 上, 有上角,因为对于小六边形来说, 对边的数是相同的, 然 ...

  8. Linux GRUB 2及修改默认启动项

    The GRUB 2 boot loader makes sure that you can boot Linux. GRUB 2 is installed in the boot sector of ...

  9. C：应用于字符串处理函数

    出于对C的不够熟悉,在读代码的过程中,平凡出现的字符串处理函数,成为了一个理解代码的大问题. 为了更方便的读取和理解代码,特意将接触到的字符串处理函数列出,方便查询: 1.strstr(str1,st ...

  10. CSS 样式属性锦集

    ul#nav > Li 只有一个大于号,是指应用了#nav这个ID的下一级元素的儿子辈Li 元素定义的内容符合这个CSS代码定义的样式,但是孙子辈Li元素定义的内容就不符合这个CSS代码样式了, ...