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

时间:2022-10-02 22:24:18

问题: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”时创建新的层叠上下文

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

  1. 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响

    原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...

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

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

  3. CSS 设置背景透明度,不影响子元素

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

  4. EMPTY表示元素不能包含文本,也不能包含子元素

    <?xml version=”1.0″ encoding=”GB2312″?> <!ELEMENT Customer EMPTY> <!ATTLIST Customer称 ...

  5. 当fixed元素相互嵌套时chrome下父元素会影响子元素的层叠关系

    问题:fixed元素被另一个fixed元素包含的时候在chrome下fixed子元素的定位会受到父元素的影响. demo(http://jsbin.com/qumah/1): <!DOCTYPE ...

  6. 父元素高度设置为min-height,子元素高度设置为100&percnt;,但实际上子元素高度你知道是多少吗?

    前言 给父元素一个min-height,子元素设置height:100%. 代码 <!DOCTYPE html> <html> <head> <title&g ...

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

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

  8. html5shiv主要解决IE6-8 无法识别HTML5的新标签,父节点不能包裹子元素,以及应用CSS样式

    html5shivehtml5shiv主要IE6-8解决:1,HTML5提出的新的元素不被IE6-8识别.2,这些新元素不能作为父节点包裹子元素,3,并且不能应用CSS样式.让CSS 样式应用在未知元 ...

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

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

随机推荐

  1. &period;NET Core下的日志(1):记录日志信息

    记录各种级别的日志是所有应用不可或缺的功能.关于日志记录的实现,我们有太多第三方框架可供选择,比如Log4Net.NLog.Loggr和Serilog 等,当然我们还可以选择微软原生的诊断机制(相关A ...

  2. JAVA里面的IO流(一)分类2(节点流和处理流及构造方法概要)

    IO流根据处理对象的不同分为节点流和处理流. 直接对文件进行处理的流为节点流: 对流进行包装从而实现对文件的优化处理的流为处理流. 节点流类型: 可以看出,节点流主要分这几大类: 文件流 文件流构造方 ...

  3. Java多线程编程核心技术---拾遗增补

    线程状态验证 public class MyThread extends Thread { public MyThread() { System.out.println("构造方法中的状态: ...

  4. linux 2&period;6&period;21版本的内核合法的MAC地址

    当执行ifconfig eth0 hw ether 11:22:33:44:55:66时,当前内核显示修改成功,但是ping时只无限发送ARP包,PC机也已经给板子回ARP包,但没有任何ICMP包的信 ...

  5. mac上xampp配置

    sudo su /Applications/XAMPP/xamppfiles/xampp security

  6. BZOJ 1571&colon; &lbrack;Usaco2009 Open&rsqb;滑雪课Ski

    Description Farmer John 想要带着 Bessie 一起在科罗拉多州一起滑雪.很不幸,Bessie滑雪技术并不精湛. Bessie了解到,在滑雪场里,每天会提供S(0<=S& ...

  7. 微博输入相关js 代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 我的前端故事----关于redux的一些思考

    背景 我一个前端,今年第一份工作就是接手一个 APP 的开发...一个线下 BD 人员用的推广 APP,为了让我这个一天原生开发都没有学过的人能快速开发上线,于是乎就选择了 react-native ...

  9. jsonp原理,封装,应用(vue项目)

    jsonp原理 JSON是一种轻量级的数据传输格式. JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.由于同源策略,一般来说位于 ...

  10. 阿里云上的Centos 7&period;6的一次Nginx&plus;Mysql&plus;PHP7&period;3 部署

    阿里云申请了一台服务器 Centos 7.6,每次安装都要上网找一大堆教程,因为不熟悉,因为总是忘记. 所以,有时间的时候,还是记录下自己的学习过程,有助于下次的问题解决. 我先总结下: 1)安装VS ...