`

转:IE中z-index层叠失效

阅读更多

最近在制作HTML页面,很多两列的地方需要一侧因定宽度,另一侧自适应宽度.当需要一个下拉菜单效果时,无论把z-index的值设为多高,菜单的DIV始终不在页面最顶层.
HTML


<div class="a">
a <div class="menu">sub a</div>
</div>
<div class="b">
b
</div>

 


CSS


.a {
position:relative;
background:#f00;
}
.menu{
position:absolute;
background:#0ff;
height:50px;
z-index:99;
}
.b {
position:relative;
background:#ff0;
}

 


以上是页面代码,menu的z-index已设为99,但在IE6,IE7中DIV[menu]始终在div的下面.只能通加设置div[a]的z-index的值来提升级div[menu]层叠高度,但在火狐中无需设置.可以看出IE对层叠顺序的继承性比火孤要严格的多.

如果不明白的话,意思就是把DIV[menu]再包含到一个DIV,然后设置外面的DIV这样就行的通了

分享到:
评论

相关推荐

    chrome中position:fixed对z-index的影响

    dom结构:正常的实现方式很容易:因为B本身就在A的后面,当A和B都设置了position属性(非static),且没有设置z-index的时候,其层叠关系是后面的元素覆盖前面的元素,这样只需要给A-child设置z-index属性值即可。...

    ie6 z-index不起作用的完美解决方法

    然而,在IE6浏览器中,即使设置了很高的z-index值,有时元素仍然无法正确显示在预期的层叠级别之上。 首先,我们必须了解z-index属性的工作原理。z-index只有在元素的position属性被设置为relative、absolute或...

    IE7 设置z-index的覆盖问题的解决方法

    在这些版本的IE浏览器中,当父元素设置了position:relative,其子元素所设置的z-index属性有时会失效,导致层叠顺序与预期不符。 z-index属性是CSS中的一个属性,它控制着定位元素的堆叠顺序。正常情况下,具有更高...

    ie6下select覆盖div的解决办法

    这种行为是由于IE6对CSS层叠上下文理解的局限性,以及对z-index属性的不完全支持导致的。 为了解决这个问题,我们可以尝试以下几种策略: 1. **绝对定位与z-index**:首先,给被覆盖的Div设置`position: relative;...

    DIV在IE6中被下拉菜单占据的问题

    2. **设置更高的z-index**:尽管在IE6中可能不起作用,但还是值得尝试为受影响的`&lt;div&gt;`元素设置一个高于下拉菜单的`z-index`值。 3. **使用hasLayout属性**:IE6中有一些元素拥有一个称为“hasLayout”的内部属性...

    border-radius失效

    尝试移除或调整这些属性,或者使用`z-index`和`relative`定位来解决问题。 5. **内嵌框架(IFRAME)**:如果元素是内嵌框架,`border-radius`可能不会应用于整个框架,因为浏览器的安全策略限制。在这种情况下,需要...

    div被iframe遮住的几种情况及解决方法

    尽管这一特性带来了许多便利,但同时也带来了诸如内容覆盖、Z-index层叠问题以及不同浏览器兼容性问题等。 第一种情况是透明背景被遮住。这种情况通常发生在DIV元素使用了透明背景时,比如通过CSS的opacity属性或者...

    css入门笔记

    必须是父子(有层叠嵌套的关系)结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式(就近原则) 3.内联样式 4.!important; 绝对优先使用() 格式 p{ color:red !important; ...

    ie的常见兼容问题

    特别是当涉及到`z-index`层叠顺序时,IE可能会出现错误的表现。为了解决这类问题,需要仔细检查定位属性的设置,并进行必要的调整。 2. **水平居中**:在IE中实现元素的水平居中有时会比较困难。常用的几种方法包括...

    IE6下Select元素被div等元素覆盖的解决办法

    此问题的根本原因在于IE6对z-index属性的解释与其它浏览器不同,导致z-index值设置失效。在IE6中,某些特定元素如select元素,在z轴上的高度可能失控,从而破坏了正常的层叠顺序。 为了解决这个问题,可以利用IE6...

    解决kindeditor 编辑器完美支持IE11 看不见上传文件框问题 无法保存问题

    这可能是由于CSS样式在IE11上的解析差异或Z-index层叠问题导致的。首先,检查KindEditor的CSS样式,确保所有涉及定位和浮动的属性(如`position`, `z-index`, `float`等)在IE11下工作正常。对于`z-index`,确保上传...

    IE7 position:relative的问题

    这个建议的原理是,绝对定位的元素会相对于最近的非静态定位的祖先元素进行定位,即使没有设置`z-index`,也可以避免在IE7中出现的定位问题。修改后,重新计算了`top`值以确保元素在各浏览器中的位置正确,最终在IE6...

    div怎样在object上面显示不被object动画给遮挡

    Flash在某些浏览器中会创建一个独立的渲染层,导致`z-index`失效。为了解决这个问题,我们需要利用Flash的一个参数——`wmode`。 在`object`标签中,可以添加`&lt;param&gt;`标签来传递参数给Flash内容。其中,`wmode`...

Global site tag (gtag.js) - Google Analytics