ie7 z-index 失效问题

解决办法:

父级元素加上position:relative;并设置z-index.

父级元素的z-index优先,其中包含的元素的z-index是相对于父级元素的index.

<div style="position:relative;z-index=2">

<p style="position:absolute;z-index=99"> ...(要在上层显示的内容)</p>

<div>

<div style="position:relative;z-index=1">

...

<div>

上面的例子中,倘若将第一个div的z-index设置为-1,则无论p的z-index为多少,多会被下面的div遮住。

相反,倘若下层div的z-index也设置成2,ie7正在解释时,会按照"position:relative"的层的顺序,自动叠加,即实际值是3.

没有加position属性时,所有值继承自父级。

时间: 2024-10-28 22:46:54

ie7 z-index 失效问题的相关文章

IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在父标签中加入overflow:hidden:或zoom:100%示例代码: 不正常显示 ul{} li{ list-style:none; float:left; margin:10px;} 1. 你会发现左边10px 变成20px了, 解决办法:在li的CSS中加入:display:inline

QAbstractItemView::setRootIndex(const QModelIndex &amp; index) 失效

问题: 在逻辑中使用了, QAbstractItemView::setRootIndex(const QModelIndex & index), 第一次设置生效, view 进入了model 中指定的item, view 内只显示该item内部的children items. 这个效果是我要的. bug: 对 model, view,等做过一些操作后(最有代表性的是:过滤), root item 不再是我人为设定的了, 变成了"整棵树"原始model的root. 重现方式: 用

ie7下z-index失效问题解决方法

绝对定位元素的“有定位属性(relative或absolute)的父元素”在渲染层次时起到了主要作用,前面的被后面的覆盖了.解决办法就是给有定位属性的父元素设置z-index 解决办法: 父级元素加上position:relative;并设置z-index. 父级元素的z-index优先,其中包含的元素的z-index是相对于父级元素的index. <div style="position:relative;z-index=2"> <p style="pos

ie7下z-index失效问题解决方法(详细分析)

绝对定位元素的"有定位属性(relative或absolute)的父元素"在渲染层次时起到了主要作用,前面的被后面的覆盖了.解决办法就是给有定位属性的父元素设置z-index 解决办法: 父级元素加上position:relative;并设置z-index属性.父级元素的z-index优先,其中包含的元素的z-index是相对于父级元素的index. <div style="position:relative;z-index:2;"> <p sty

IE7下z-index失效

看代码: HTML <div class="select-wrap"> <div class="select-name">院系</div> <div class="arrow"><img src="./img/arrow.png"></div> <span class="selected-text"></span>

小箭头的写法,z-index在ie7显示混乱问题

一.jQuery 发布 1.9 正式版,最后支持 IE 6/7/8,2.0以上的版本都不支持这三个浏览器了. 二.小箭头的写法与旋转切换(一直以为这样的只以切图片,原来未必哦.) <style> * { margin: 0; padding: 0; } i, s { font-style: normal; } .box { width: 50px; height: 50px; background: lightpink; margin: 200px auto; position: relati

IE6,IE7,IE8 css bug搜集及浏览器兼容性问题解决方法汇总

http://www.jb51.net/css/85640.html 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1:li边距“无故”增加  任何事情都是有原因的,li边距也不例外.  先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的paddi

【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳

1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响.所以只好笨手笨脚地把padding去掉,换成margin.这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象. 现在终于发现解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置

ie6,ie7,ie8 css bug兼容解决记录

ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决 ,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法! 1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着

ie6,ie7,ie8 css bug汇总以及兼容解决方法

1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是由于其低级元素ul的padding引 起,padding的上下值对li有影响,左右无影 响.所以只好笨手笨脚地把padding去掉,换成margin.这是能解决问题,但往往不是我们想要的结果,或许 还会引起其他不必要的怪现象. 解决这个问题的方法,其实很简单,既然是有ul引 起的,就设置ul的显示形