在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴。对于每个html元素,都可以通过设置z-index属性来设置该元素在视觉渲染模型中的层叠顺序。

  z-index属性:

    1. z-index : auto | number

    2. z-index 属性设置元素的堆叠顺序,如果为正数,则离用户更近,为负数则表示离用户更远;

    3. 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面;

    4. z-index 仅能在定位元素上奏效(position 属性值为 relative 或 absolute 或 fixed的对象)。

  参考层叠级数,浏览器会根据以下规则来渲染绘制每个在同一个层叠上下文中的盒模型

  在一些实际应用里,(比如说悬浮在一级菜单上显示二级菜单),我们需要用到z-index属性,但是我们会发现z-index属性在ie7及其以下不起作用,效果如图:

  按照正常的思维,z-index层级越高,内容越应该在上面显示,在大部分的浏览器在大部分的情况下,确实如此,但是不绝对。尤其遇到IE6。在IE6下的层级高低不仅要看本身,还要看自己的父元素是否给力:父元素的 position 属性为 relative或absolute 时,子元素的 absolute 属性是相对于父元素而言的。而在IE6下的层级的表现有时候不是看子元素的 z-index 多高,而要看它们的父元素的 z-index 谁高谁低。

  发现了症结所在,解决办法也就简单了,只需要给该元素的祖先元素加上z-index就可以。

  修改好后,得到了正常的效果:

 

z-index在IE中的坑的更多相关文章

  1. Torch-RNN运行过程中的坑 [2](Lua的string sub函数,读取中文失败,乱码?)

    0.踩坑背景 仍然是torch-rnn/LanguageModel.lua文件中的一些问题,仍然是这个狗血的LM:encode_string函数: function LM:encode_string( ...

  2. Torch-RNN运行过程中的坑 [1](读取Lua非空table,size为0)

    0.踩坑背景 执行Torch-RNN的时候,在LanguageModel.lua中的encode_string函数中,对start_text的各个character进行id映射编码,实现功能类似“北京 ...

  3. Golang中的坑二

    Golang中的坑二 for ...range 最近两周用Golang做项目,编写web服务,两周时间写了大概五千行代码(业务代码加单元测试用例代码).用Go的感觉很爽,编码效率高,运行效率也不错,用 ...

  4. vue中的坑 --- 锚点与查询字符串

    在vue中,由于是单页面SPA,所以需要使用锚点来定位,在vue的官方文档中提到过也可以不使用锚点的情况,就是在vue-router中使用history模式,这样,在url中就不会出现丑陋的#了,但是 ...

  5. ArrayList分析2 :Itr、ListIterator以及SubList中的坑

    ArrayList分析2 : Itr.ListIterator以及SubList中的坑 转载请注明出处:https://www.cnblogs.com/funnyzpc/p/16409137.html ...

  6. Golang 中的坑 一

    Golang 中的坑 短变量声明  Short variable declarations 考虑如下代码: package main import ( "errors" " ...

  7. Mysql系列八:Mycat和Sharding-jdbc的区别、Mycat分片join、Mycat分页中的坑、Mycat注解、Catlet使用

    一.Mycat和Sharding-jdbc的区别 1)mycat是一个中间件的第三方应用,sharding-jdbc是一个jar包 2)使用mycat时不需要改代码,而使用sharding-jdbc时 ...

  8. Windows API中的坑

    本文主页链接:Windows API中的坑 ExpandEnvironmentStrings 风险: 进程会继承其父进程的环境变量.在展开如%APPDATA%等文件夹时,有可能父进程对此环境变量进行过 ...

  9. 详解vue静态资源打包中的坑与解决方案

    本文主要解决: 1.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; 2.静态资源打包使用相对路径后css文件引入图片路径错误问题. 一.问题 vue-cli 脚手架生成的默认打包配 ...

  10. Torch-RNN运行过程中的坑 [0](一些基础概念)

    0.Lua & LuaJIT简介 Lua 是一种轻量小巧的脚本语言,用标准C语言编写并以源代码形式开放, 其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能. Lua 是巴 ...

随机推荐

  1. oracle之 dblink 报ORA-03113 TNS-12543

    -- 客户端使用含 dblink sql报错( 症状:当数据库使用dblink访问其他数据库时,第一次执行某条dblink sql大多数情况下可以成功,偶尔执行一段时间后报错.如果该会话空闲二十分钟以 ...

  2. centOS7-配置网络地址

    1.首先需求切换都root账户 # su #输入密码: 2.进入网络配置文件目录查看 ()进入该目录 # /etc/sysconfig/network-scripts ()查看目录下文件 # ll - ...

  3. Codeforces #448 Div2 E

    #448 Div2 E 题意 给出一个数组,有两种类型操作: 选定不相交的两个区间,分别随机挑选一个数,交换位置. 查询区间和的期望. 分析 线段树区间更新区间求和. 既然是涉及到两个区间,那么对于第 ...

  4. 深入一致性哈希(Consistent Hashing)算法原理,并附100行代码实现

    转自:https://my.oschina.net/yaohonv/blog/1610096 本文为实现分布式任务调度系统中用到的一些关键技术点分享——Consistent Hashing算法原理和J ...

  5. Java集合源码分析(四)HashMap

    一.HashMap简介 1.1.HashMap概述 HashMap是基于哈希表的Map接口实现的,它存储的是内容是键值对<key,value>映射.此类不保证映射的顺序,假定哈希函数将元素 ...

  6. Vijos P1131 最小公倍数和最大公约数问题【暴力】

    最小公倍数和最大公约数问题 描述 输入二个正整数x0,y0(2≤x0≤100000,2≤y0≤1000000),求出满足下列条件的P.Q的个数. 条件:1.P.Q是正整数 2.要求P.Q以xO为最大公 ...

  7. [bzoj3955] [WF2013]Surely You Congest

    首先最短路长度不同的人肯定不会冲突. 对于最短路长度相同的人,跑个最大流就行了..当然只有一个人就不用跑了 看起来会T得很惨..但dinic在单位网络里是O(m*n^0.5)的... #include ...

  8. 蓝桥杯模拟赛-引爆炸弹-DFS+并查集

    今天整理电脑,翻出来了很久以前大佬给的题,贴一下. 引爆炸弹 1000ms 在一个 n×m的方格地图上,某些方格上放置着炸弹.手动引爆一个炸弹以后,炸弹会把炸弹所在的行和列上的所有炸弹引爆,被引爆的炸 ...

  9. Linux下gdb的安装及使用入门

    1.安装gdb. 在root用户权限下: root@iZ2zeeailqvwws5dcuivdbZ:~# apt-get update ...... ...... ...... root@iZ2zee ...

  10. ThoughtWorks University之旅 —— 印度游记

    ThoughtWorks University是ThoughtWorks为新加入的员工提供的入职培训项目之一,会将世界各地office新入职的员工一起带到印度浦那,参加一次为期5周的培训,内容涵盖了公 ...