栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

IE7 Z索引分层问题

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

IE7 Z索引分层问题

Z索引不是绝对测量。 只要z-index:1000的元素位于 不同的 堆叠上下文中 ,则z-index:1000的元素可能位于z-
index:1
的元素之后。

当您指定z-index时,您是相对于同一堆叠上下文中的其他元素指定它的,尽管CSS规范在Z-index上的段落指出,仅为 具有z-index而不是z-index的 定位内容创建新的堆叠上下文_自动_(意味着您的整个文档应该是单个堆叠上下文),您 _确实_构造了定位范围:不幸的是,IE7将没有z索引的定位内容解释为新的堆叠上下文。

简而言之,请尝试添加以下CSS:

#envelope-1 {position:relative; z-index:1;}

或重新设计文档,以使您的跨度不再具有相对位置:

<html><head>    <title>Z-Index IE7 Test</title>    <style type="text/css">        ul { background-color: #f00;  z-index: 1000; position: absolute; width: 150px;        }    </style></head><body>    <div>        <label>Input #1:</label> <input><br>        <ul><li>item<li>item<li>item<li>item</ul>    </div>    <div>        <label>Input #2:</label> <input>    </div></body></html>

。使父元素(在您的示例中为envelope-1)具有更高的z-index的原因是,因为那时信封1的所有子元素(包括菜单)都将与信封1的所有兄弟姐妹(特别是信封2)重叠。

尽管使用z-index可以显式定义事物的重叠方式,即使没有z-index,[也可以很好地定义分层顺序。最后,IE6还有一个额外的错误,该错误导致选择框和iframe浮动在其他所有内容之上。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/432582.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号