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

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

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

  • 根元素 (HTML),
  • 绝对(absolute)定位或相对(relative)定位且z-index值不为"auto",
  • 元素的opacity属性值小于1. (参考 the specification for opacity),
  • 在mobile WebKit 和 Chrome 22+内核的浏览器中, position: fixed 总是创建一个新的层叠上下文, 即使z-index的值是"auto" (See this post)

  每个层叠上下文都有如下的层叠级别组成(显示顺序从后到前):

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

结论:在chrome22+的浏览器中,position为fixed总是会创建新的重叠上下文,所以子fixed元素在此时会以父fixed元素为层叠上下文,子元素的层叠关系会受到父元素的影响。而在非chrome浏览器下子fixed元素并不会创建新的层叠上下文,fixed元素的层叠上下文为最近的层叠上下文。 因此,我们应该尽量避免出现fixed元素相互嵌套的问题。如果必须有嵌套的情况,建议修改fixed父元素的z-index值来修正在chrome下fixed子元素的层叠问题

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

    • opacity值小于1的元素会创建新的层叠上下文
    • opacity值小于1的元素的层叠级别相当于z-index:0的定位元素。此时设置z-index会失效,除非该元素同时为定位元素
    • opacity值小于1的元素如果同时为定位元素时,则该元素将同时具有定位元素和opacity小于1元素的特性之和。换句话说,就是z-index等于“auto”时会被当成z-index等于“0”时创建新的层叠上下文
上一篇:css控制父元素下的子元素自适应高度,且高度一致


下一篇:Oracle中获取当前时间半小时前的时间