在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. 深入理解JVM(六)——类加载器原理

    我们知道我们编写的java代码,会经过编译器编译成字节码文件(class文件),再把字节码文件装载到JVM中,映射到各个内存区域中,我们的程序就可以在内存中运行了.那么字节码文件是怎样装载到JVM中的 ...

  2. 由浅入深SCF无服务器云函数实践

    欢迎大家前往云+社区,获取更多腾讯海量技术实践干货哦~ 作者:陈杰,腾讯云架构平台部技术专家 近年来,互联网服务从一开始的物理服务器托管,虚拟机,容器,发展到现在的云函数,逐步无服务器化,如下表所示. ...

  3. clear命令新认识

    学习Linux的时候,最先学习的几个命令中有一个就是clear,中文翻译为:清屏. 以前的理解都是按照字面进行解读的,清除屏幕上多余的内容. 但是实际上真的如此么? 原来屏幕是: 运行clear命令: ...

  4. linux报错:命令未找到

    前段时间看到一个比较好玩的项目:[musicbox](https://github.com/darknessomi/musicbox) 开始用git clone安装,输入命令无法运行.开始以为安装有问 ...

  5. python递归查找文件目录

    # -*- coding:utf-8 -*- import os allfile = []def get_all_file(path): allfilelist = os.listdir(path) ...

  6. BZOJ1294: [SCOI2009]围豆豆Bean

    题目:http://www.lydsy.com/JudgeOnline/problem.php?id=1294 状压dp,dis[s][i][j]表示从(i,j)出发围的状态是s的最短路. 然后判断一 ...

  7. mysql中配置ssl_key、ssl-cert、ssl-ca的路径及建立ssl连接

    1.创建 CA 私钥和 CA 证书 (1)下载并安装openssl,将bin目录配置到环境变量: (2)设置openssl.cfg路径(若不设置会报错,找不到openssl配置文件) \bin\ope ...

  8. Qt 共享库(动态链接库)和静态链接库的创建及调用

    前言: 编译器 Qt Creator, 系统环境 win7 64 位 1.创建共享库: 新建文件或项目->选择 Library 和 c++ 库->选择共享库->下一步(工程名为 sh ...

  9. hbase安装版本

    Hbase的安装部署,依赖HDFS,Zookeeper-3.4.5,jDK1.7以上,Hadoop-2.5.0以上

  10. 解决CSS垂直居中的几种方法(基于绝对定位,基于视口单位,Flexbox方法)

    在CSS中对元素进行水平居中是非常简单的:如果它是一个行内元素,就对它的父元素应用 text-align: center ;如果它是一个块级元素,就对它自身应用 margin: auto.然而如果要对 ...