问题：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. Java---多线程之死锁

    ★ 死锁的两种情况: 简单的说下单块cpu运行多线程的情况: 大家可能平时玩电脑,可以同时挂QQ啊,玩游戏啊,打开文本啊,等等.这里,我们假设是单块cpu.也就是俗称的单核cpu. 大家可能会觉得这些 ...

  2. android 使用String.format("%.2f",67.876)自已定义语言（俄语、西班牙语）会把小数点变为逗号

    市场人员反映公司的app使用系统设置俄语.西班牙语,double数据会把小数点变为逗号.调试一下,是自定义的语言时候(例如,俄语.西班牙语)转换String.format("%.2f&quo ...

  3. android开发之——混淆编译

    众所周知,android的apk文件是非常容易被反编译的,这样对于开发者来说,辛辛苦苦开发应用被破解是一件很令人懊恼的事情,谷歌也认识到了这一点,所以从2.3之后就为开发者提供了一个代码混淆工具pro ...

  4. Android文档资源大放送 感兴趣的话可以网盘下载（个人收集）

    Google.Android.SDK开发范例大全.第3版源码.rar http://pan.baidu.com/s/1c0epYzm 精通Android 3中文版(Pro Android 3).pdf ...

  5. Android（java）学习笔记249：ContentProvider使用之获得系统联系人信息01

    1.系统联系人的数据库(3张最重要的表) (1)raw_contacts  联系人表        保存联系人的id   contact_id (2)data 数据表       保存联系人的数据 ( ...

  6. Linux随笔

    列表:ls -l(显示详细属性)long -a(显示全部文件包括隐藏文件)all -h(字节转换) -d(显示当前目录本身不显示目录下) -i(显示I节点) df -h 人性化查看磁盘占用率 serv ...

  7. 配置Android开发环境

    1.下载JAVASE http://www.oracle.com/technetwork/java/javase/downloads/index.html 根据自己系统选择JAVASE版本 2.下载A ...

  8. 自定义控件 TextView 歌词 Lrc

    演示 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> < ...

  9. WIN7 64位上 MYSQL的ODBC一些个人理解

    最近电脑中毒了,无奈之下把32位的xp换成了64位的win7,无聊耗时的搭完开发环境,装了vs6.0(忽略掉一切的不兼容),装完64位的mysql(“mysql-5.6.10-winx64.zip”) ...

  10. 使程序能够引入.json文件， 为网站添加 MIME 映射

    确认启用了 MIME 映射,或使用命令行工具 appcmd.exe 为网站添加 MIME 映射. 若要设置 MIME 类型,请在 IIS Express 安装目录中运行以下命令: appcmd set ...