IE7 Z-Index 分层问题 [英] IE7 Z-Index Layering Issues

查看：19 发布时间：2021/12/1 16:52:39 css internet-explorer-7 z-index

本文介绍了IE7 Z-Index 分层问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经隔离了 IE7 的 z-index 错误的一个小测试用例，但不知道如何修复它.我整天都在玩 z-index.

IE7 中的 z-index 有什么问题?

测试 CSS:

input {边框:1px 实心 #000；}div {边框:1px 实心 #00f；}ul{边框:1px 实心 #f00;背景色:#f00；列表样式类型:无；边距:0；填充左:0;z-索引:1000；}李{颜色:#fff;列表样式类型:无；填充左:0;左边距:0；}跨度.信封{位置:相对；}span.envelope ul {位置:绝对；顶部:20px；左:0；宽度:150px；}

测试 HTML:

<label>输入#1:</label><span id="envelope-1" class="envelope"><input name="my-input-1" id="my-input-1"/><ul><li>项目</li><li>项目</li><li>项目</li><li>项目</li></span><br><br><label>输入#2:</label><span id="envelope-2" class="envelope"><input name="my-input-2" id="my-input-2"/></span></表单>

解决方案

Z-index 不是绝对测量.z-index: 1000 的元素可能位于 z-index: 1 的元素后面 - 只要各个元素属于不同的堆叠上下文.

当您指定 z-index 时，您是在相对于同一堆叠上下文中的其他元素指定它，尽管 CSS 规范关于 Z-index 的段落说一个新的堆叠上下文只为定位内容创建z-index 不是 auto(意思是你的整个文档应该是一个单一的堆叠上下文)，你确实构造了一个定位范围:不幸的是，IE7 将没有 z-index 的定位内容解释为一个新的堆叠上下文.

简而言之，尝试添加此 CSS:

#envelope-1 {position:relative;z-索引:1;}

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

<头><title>Z-Index IE7 测试</title><style type="text/css">ul{背景色:#f00；z-索引:1000；位置:绝对；宽度:150px；}</风格><身体><div><label>输入#1:</label><输入><br><ul><li>item<li>item<li>item<li>item</ul>

<div><label>输入#2:</label><输入>

参见 http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ 有关此错误的类似示例.为父元素(在您的示例中为信封 1)提供更高 z-index 的原因是因为信封 1 的所有子元素(包括菜单)将与信封 1 的所有兄弟元素(特别是信封 2)重叠.

尽管 z-index 允许您明确定义事物如何重叠，即使没有 z-index分层顺序是明确定义的.最后，IE6 有一个额外的错误，它会导致选择框和 iframe 浮动在其他一切之上.

I've isolated a little test case of IE7's z-index bug, but don't know how to fix it. I have been playing with z-index all day long.

What is wrong with z-index in IE7?

Test CSS:

input {
    border: 1px solid #000;
}

div {
    border: 1px solid #00f;
}

ul {
    border: 1px solid #f00;
    background-color: #f00;
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    z-index: 1000;
}

li {
    color: #fff;
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;
}

span.envelope {
    position: relative;
}

span.envelope ul {
    position: absolute;
    top: 20px;
    left: 0;
    width: 150px;
}

Test HTML:

<form>
  <label>Input #1:</label>
  <span id="envelope-1" class="envelope">
    <input name="my-input-1" id="my-input-1" />
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
  </span>
  <br><br>
  <label>Input #2:</label>
  <span id="envelope-2" class="envelope">
    <input name="my-input-2" id="my-input-2" />
  </span>
</form>

解决方案

Z-index is not an absolute measurement. It is possible for an element with z-index: 1000 to be behind an element with z-index: 1 - as long as the respective elements belong to different stacking contexts.

When you specify z-index, you're specifying it relative to other elements in the same stacking context, and although the CSS spec's paragraph on Z-index says a new stacking context is only created for positioned content with a z-index other than auto (meaning your entire document should be a single stacking context), you did construct a positioned span: unfortunately IE7 interprets positioned content without z-index this as a new stacking context.

In short, try adding this CSS:

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

or redesign the document such that your spans don't have position:relative any longer:

<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>

See http://www.brenelz.com/blog/2009/02/03/squish-the-internet-explorer-z-index-bug/ for a similar example of this bug. The reason giving a parent element (envelope-1 in your example) a higher z-index works is because then all children of envelope-1 (including the menu) will overlap all siblings of envelope-1 (specifically, envelope-2).

Although z-index lets you explicitly define how things overlap, even without z-index the layering order is well defined. Finally, IE6 has an additional bug that causes selectboxes and iframes to float on top of everything else.

这篇关于IE7 Z-Index 分层问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

IE7 Z-Index 分层问题 [英] IE7 Z-Index Layering Issues

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

IE7 Z-Index 分层问题 [英] IE7 Z-Index Layering Issues

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭