`

转: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属性值即可。...

    HTML5&CSS3网页制作:zindex层叠等级属性.pptx

    z-index层叠等级属性 z-index层叠等级属性 01 z-index层叠等级属性 当对多个元素同时设置定位时,定位元素之间有可能会发生重叠。 定位导致重叠 z-index可以调整重叠定位元素的堆叠顺序,其取值可为正整数、负整数和...

    深入剖析z-index属性

    一、z-index七阶层叠顺序表 1.层叠顺序的大小比较: background/border &lt; 负z-index &lt; block块状水平盒子 &lt; float浮动盒子 &lt; inline/inline-block水平盒子 &lt; z-index:auto或者看成z-index:0 /不依赖z...

    Revit实用快捷键大全(绝对经典).docx

    * RG:编辑-成组-从组中删除 * AD:编辑-成组-附着详图 * PG:编辑-成组-组属性 * FG:编辑-成组-完成组 * CG:编辑-成组-取消组 * PP:编辑-锁定位置 * UP:编辑-解锁位置 * CS:编辑-创建类似实例 * PR:编辑-属性...

    层叠样式表单-CSS 层叠样式表单-CSS

    层叠样式表单-CSS 层叠样式表单-CSS 层叠样式表单-CSS 层叠样式表单-CSS 层叠样式表单-CSS 层叠样式表单-CSS

    多媒体技术-----层叠样式表CSS

    -------------------- 多媒体技术-----层叠样式表CSS

    CSS教程:元素层叠级别及z-index

    原文:http://rong179.blogbus.com/logs/24966909.html声明定位元素:position属性值设置除默认值static以外的元素...平台:win/IE win/FFz-index:用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序值:

    CSS中的z-index属性基本使用教程

    z-index语法和应用 CSS Code复制内容到剪贴板 z-index: auto |   z-index 接受的属性值为:关键字auto和整数,整数可以是负值(Firefox2.0及之前不支持负值)。...在规范中说明:当某个元素的 z-index 未显式定义

    ie下的css层叠z-index各种问题详细整理

    可是真有些日子没有写DIV+CSS了,而且对IE6兼容性的坑碰到的还是不够多(以前做国外项目),所以这次开发中不可避免的碰见了几个问题,尤其是在IE下的 z-index 问题很有意思,所以整理了一些资料和总结分享给大家…注...

    个人音乐博客 h5和css适用于新手借鉴

    css---&gt;层叠样式表文件 main.css---&gt;index.html(也就是主页面的样式) reset.css---&gt;覆盖浏览器默认的css样式 img---&gt;存放页面所有的图片文件(.jpeg、.jpg、.png等图片) js---&gt;方便一些功能的实现 jquery.min....

    jQuery教程学习

    第四章:样式篇 - 层叠样式表的处理 第二十节:jQuery速成- 样式的设置与定义 第五章:提高篇 - jQuery中的事件机制 第二十一节:jQuery速成- 页面的载入事件与事件处理 第二十二节:jQuery速成- 鼠标事件与交互 第...

    3-html+css简答题.doc

    :可以使用z-index属性来设置元素的层叠顺序。 三、CSS基础知识 21. 什么是CSS?它的作用是什么?:CSS是层叠样式表的缩写,它的作用是用于描述HTML文档的样式和布局。 22. 如何在HTML页面中引入CSS?:可以使用...

    CSS元素的层叠与z-index设置

    今天这篇文章,主要介绍了元素的层叠与z-index设置,希望对您有所帮助,更多的知识,请多多参考jb51.net的教程。 声明  定位元素:position属性值设置除默认值static以外的元素,包括relative,absolute,fixed。 ...

    Revit实用快捷键大全(绝对经典).doc

    * "WC" menu:"窗口-层叠" * "WT" menu:"窗口-平铺" * "SI" snapcode:"交点" * "SE" snapcode:"端点" * "SM" snapcode:"中点" * "SC" snapcode:"中心" * "SN" snapcode:"最近点" * "SP" snapcode:"垂足" * "ST" ...

    详解CSS中的z-index属性在层叠布局中的用法

    在我看来,z-index 给了我们日常工作中以极大的帮助,我们用它来定义元素的层叠级别(stack level)。受益于它,你能做Popup, DropDown, Tips, 图文替换等等。 在开始本篇之前,或许我们要先了解一下关于z-index的...

    深入解析CSS中z-index属性对层叠顺序的处理

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题。其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题却不大了解其原因,导致重复...

    CSS教程:网页布局定位及z-index解释

    用来确定定位元素在垂直于显示屏方向(以下称为Z轴)上的层叠顺序 值:auto | 整数 | inherit默认:auto适用于:定位元素继承性:no 理解stacking context 每个box都归属于一个stacking context,它是元素在z轴方向...

    css 层叠与z-index的示例代码

    既然是叠加,就会涉及到先后顺序的问题,规范中称之为“层叠等级”。 默认情况下,图文是网页的核心,因此内联元素的等级理应最高;然后是布局,其中浮动元素(脱离文档流)的等级高于块级元素;最低等级是设置背景...

Global site tag (gtag.js) - Google Analytics