Z-index在IE中失效的解决办法
作者:JacoobIE6、7都存在着z-index失效的bug,万恶的IE,对于每一个美工来说,IE都不怎么招人待见。但是又无法不照顾到它,毕竟它还占有强大的市场份额。我们不能期望它做出什么改变,我们就要学会找到方法去迎合它。
Z-index是让元素漂浮起来的一个属性,在IE6、7中无论你把Z-INDEX的级别设置的有多高,它就是不漂浮起来。在CSS中,要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或是fixed。
1.第一种情况(z-index无论设置多高都不起作用情况):这种情况发生的条件有三个:
1、父标签 position属性为relative;
2、问题标签无position属性(不包括static);
3、问题标签含有浮动(float)属性。
eg:z-index层级不起作用,浮动会让z-index失效
<div style="position:relative; z-index:9999;">
<img style="float:left;" src="http://www.jacoobs.com/image/logo.jpg" />
</div>
解决办法有三个(任一即可):
1、position:relative改为position:absolute;
2、浮动元素添加position属性(如relative,absolute等);
3、去除浮动。
2.第二种情况
IE6下,层级的表现有时候不是看子标签的z-index多高,而要看整个DOM tree(节点树)的第一个relative属性的父标签的层级。
eg:IE7与IE6有着同样的bug,原因很简单,虽然图片所在div当前的老爸层级很高(1000),但是由于老爸的老爸不顶用,可怜了9999如此强势的孩子没有出头之日啊!
<div style="position:relative;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://www.jacoobs.com/image/logo.jpg" />
</div>
</div>
</div>
解决办法: 在第一个relative属性加上一个更高的层级(z-index:1)
<div style="position:relative; z-index:1;">
<div style="position:relative; z-index:1000;">
<div style="position:absolute; z-index:9999;">
<img src="http://www.jacoobs.com/image/logo.jpg" />
</div>
</div>
</div>
z-index这玩意深不可测,里面所蕴含的知识不是 CSS手册上的那点东西,那只是冰山一角。这涉及到border及background的堆叠模型,涉及到同层级的显示问题,以及浏览器显示的些机制等, 这是很深的一潭水。
总之,慢慢来,慢慢积累,慢慢研究,一定会一步一步揭开z-index的本质面纱的。
相关推荐
解决办法: 父级元素加上position:relative;并设置z-index. 父级元素的z-index优先,其中包含的元素的z-index是相对于父级元素的index. <div xss=removed> <p xss=removed> …(要在上层显示的内容)</p> <div> ...
百度到这里《小心 CSS3 Transform 引起的 z-index 失效》 “CSS3 Transform create new stacking context” 这个道理想想也明白,Transform 就是一个影子,假像,所以它不考虑z-index.那怎么解决呢? 再百度,以及去...
设置z-index时必须要固定位置,这样设置它的值时才能奏效(例如 position:absolute;)下面是示例代码,在ff3.5.5和ie5.5~ie8.0RC1中通过,大家可以尝试着不固定其位置试试。
构建项目的时候由于 采用的 antd of vue ui库 ,里面没有类似点击唤醒遮罩层的组件 ,所以自己手写vue组件进行引入 ,主要用的是 css3 z-index 属性 ,通过z-index 值不同进行层级展示。( ps :之前处理过类似需求 ...
在CSS中,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的position属性要是relative,absolute或是fixed。 1.第一种情况(z-index无论设置多高都不起作用情况): 这种情况...
IE javascript 脚本视角解决办法
安装ie7以上版本后,vb中ieframe控件失效的解决办法。运行次注册表即可。
`position: relative;z-index: -1;`时,子控件无法点击
XPS和TOF-SIMS在PCB失效分析中的应用.pdf
在引入better-scroll的组件中使用@click事件的时候,点击事件失效,v-on:click、v-bind:click、@click.native都不行,试了一下@touchstart是却是可以的,发现better-scroll的配置中没有设置click:true,设置过...
荣耀magicbook14 intel版指纹失效解决办法: 每次把magicbook重装后指纹都会失效不能使用,倒腾了好多次终于找到了解决办法, 将压缩包内的安装包按01到05的顺序依次安装一次,安装完成后重启电脑,即可使用指纹!
DC-DC电源模块高温失效原因分析.doc
Win10的Wi-Fi失效 出错的解决办法.docx
失效的scroll-x 在微信小程序的文档中,使用scroll-view标签,然后给它设置一个scroll-x就可以实现元素,横向排列,可以左右滑动。。。。 然而,在实际开发中,发现并不是这么简单。。。贴上部分wxml和wxss代码… ...
计算机系列-windows系统桌面图标失效问题解决,重置桌面图标缓存,大多就是桌面图标不见了,一个白色的类似文本文档的图标样式。
在abaqus中使用的蔡吴失效准则,为失效判断UMAT子程序
修复系统故障 XP 搜索功能失效 解决办法