问题：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. HDU4757--Tree 可持久化trie + LCA

    题意:n个点的树,Q次询问,询问u-v路径上的点的权值与z抑或的最大值. 先考虑,在一个区间上的问题,可以先建一个可持久化的Trie,然后每次询问,就和线段树的操作差不多,从最高位开始考虑选1还是选0 ...

  2. L - Kakuro Extension - HDU 3338 - （最大流）

    题意:有一个填数字的游戏,需要你为白色的块内填一些值,不过不能随意填的,是有一些规则的(废话),在空白的上方和作方给出一些值,如果左下角有值说明下面列的和等于这个值,右上角的值等于这行后面的数的和,如 ...

  3. 12、ERP设计之 系统基础管理(BS)- 模块与菜单的关联

    ShareERP2013-10-03 模块:具有功能设计.权限绑定,链接用户菜单与系统的重要桥梁. 菜单:是用于显示与用户交互的重要入口,更是导航系统的舵手,所以它的设计直接影响到用户体验. 菜单可能 ...

  4. Spark Streaming与kafka整合实践之WordCount

    本次实践使用kafka console作为消息的生产者,Spark Streaming作为消息的消费者,具体实践代码如下 首先启动kafka server .\bin\windows\kafka-se ...

  5. jquery实现图片切换和js实现图片切换

    jquery实现图片切换: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  6. 配置Ssh免密码登录

    配置Ssh免密码登录 一个master节点,两个client节点(client1.client2) 1．所有节点创建hadoop用户,并设置密码 以root账号登录: useradd hadoop p ...

  7. 开发部署一个简单的Servlet

    Servlet是一个执行在服务器端的Java Class文件,载入前必须先将Servlet程序代码编译成.class文件,然后将此class文件放在servlet Engline路径下.Servlet ...

  8. UFLDL课程学习（一）

    章节地址:http://ufldl.stanford.edu/tutorial/supervised/LinearRegression/ 章节名称:线性回归 (Linear Regression) 第 ...

  9. wildfly部署solr.war

    1.添加solr/home配置,有两种途径: 一个是修改solr.war包的web.xml,路径如下:solr-4.7.2.rar\WEB-INF\web.xml,添加如下内容:

  10. egrep和grep有什么区别

    grep默认不支持正则表达式,egrep默认支持正则表达式,egrep 等于 grep -E 命令.