z-index在IE中的坑
在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中的坑的更多相关文章
- Torch-RNN运行过程中的坑 [2](Lua的string sub函数,读取中文失败,乱码?)
0.踩坑背景 仍然是torch-rnn/LanguageModel.lua文件中的一些问题,仍然是这个狗血的LM:encode_string函数: function LM:encode_string( ...
- Torch-RNN运行过程中的坑 [1](读取Lua非空table,size为0)
0.踩坑背景 执行Torch-RNN的时候,在LanguageModel.lua中的encode_string函数中,对start_text的各个character进行id映射编码,实现功能类似“北京 ...
- Golang中的坑二
Golang中的坑二 for ...range 最近两周用Golang做项目,编写web服务,两周时间写了大概五千行代码(业务代码加单元测试用例代码).用Go的感觉很爽,编码效率高,运行效率也不错,用 ...
- vue中的坑 --- 锚点与查询字符串
在vue中,由于是单页面SPA,所以需要使用锚点来定位,在vue的官方文档中提到过也可以不使用锚点的情况,就是在vue-router中使用history模式,这样,在url中就不会出现丑陋的#了,但是 ...
- ArrayList分析2 :Itr、ListIterator以及SubList中的坑
ArrayList分析2 : Itr.ListIterator以及SubList中的坑 转载请注明出处:https://www.cnblogs.com/funnyzpc/p/16409137.html ...
- Golang 中的坑 一
Golang 中的坑 短变量声明 Short variable declarations 考虑如下代码: package main import ( "errors" " ...
- Mysql系列八:Mycat和Sharding-jdbc的区别、Mycat分片join、Mycat分页中的坑、Mycat注解、Catlet使用
一.Mycat和Sharding-jdbc的区别 1)mycat是一个中间件的第三方应用,sharding-jdbc是一个jar包 2)使用mycat时不需要改代码,而使用sharding-jdbc时 ...
- Windows API中的坑
本文主页链接:Windows API中的坑 ExpandEnvironmentStrings 风险: 进程会继承其父进程的环境变量.在展开如%APPDATA%等文件夹时,有可能父进程对此环境变量进行过 ...
- 详解vue静态资源打包中的坑与解决方案
本文主要解决: 1.vue-cli默认配置打包后部署至特定路径下静态资源路径错误问题; 2.静态资源打包使用相对路径后css文件引入图片路径错误问题. 一.问题 vue-cli 脚手架生成的默认打包配 ...
- Torch-RNN运行过程中的坑 [0](一些基础概念)
0.Lua & LuaJIT简介 Lua 是一种轻量小巧的脚本语言,用标准C语言编写并以源代码形式开放, 其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能. Lua 是巴 ...
随机推荐
- 阿里云服务器Tomcat无法从外部访问
一.环境 阿里云 Ubuntu 12.04.5 LTS tomcat和java都是阿里云默认的7的版本,如下图 二.问题 部署后./startup.sh启动tomcat 之后外部访问http://ip ...
- wifipineapple的evilportal
复制模块: scp -r evilportal root@172.16.42.1:/pineapple/components/infusions 更新数据源, 更新相关依赖: opkg update ...
- python_IO编程
本篇文章将介绍python里面的I/O编程.更多内容请参考:python学习指南 I/O编程 读写文件时最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们必须了解 ...
- dataZoom 详细参数
dataZoom:[ //区域缩放 { id: 'dataZoomX', show:true, //是否显示 组件.如果设置为 false,不会显示,但是数据过滤的功能还存在. backgroundC ...
- python调用metasploit里的MS-17-010模块进行漏洞攻击
起因:看各位大佬们写的shellcode厉害的一匹,可惜自己没学C和汇编 也看不懂shellcode,只能写一个调用metasploit里的模块进行攻击了. 0x01 攻击机:192.168.223. ...
- windows sevser 2012搭建网站
1,首先去服务器配置,从哪里下载iis8.0和asp.net和net.xx和web服务,iis控制,ftp等等服务根据自己的需求安装 安装好后把默认的网站删除掉.或者新建一个网站,把服务端口改为其他端 ...
- CSS3中结构伪类选择器——root、not、empty、target选择器
1.root选择器 将样式绑定到页面的根元素中.根元素是指位于文档树中最顶层结构的元素,在HTML页面中就是指包含整个页面的<html>部分. <style type="t ...
- bootstrap-table操作之“删除”
最近在做一个新的后台管理系统,在对数据进行操作时需要写一个"删除"功能,如图所示: 下面我来描述一下实现过程中出现的bug以及解决方法: 1.href值为空(href=" ...
- CTF---密码学入门第五题 传统知识+古典密码
传统知识+古典密码分值:10 来源: 霜羽 难度:易 参与人数:2297人 Get Flag:735人 答题人数:938人 解题通过率:78% 小明某一天收到一封密信,信中写了几个不同的年份 ...
- Vijos P1103 校门外的树【线段树,模拟】
校门外的树 描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0,1,2,……, ...