Css IE 6&；IE7Z指数问题_Css_Internet Explorer_Cross Browser

Css IE 6&；IE7Z指数问题

css internet-explorer

Css IE 6&；IE7Z指数问题,css,internet-explorer,cross-browser,Css,Internet Explorer,Cross Browser,我正试图让跳水标志杆坐在跳水池底部上方。这在除IE6和IE7之外的所有浏览器中都可以正常工作。有人能看出这里有什么问题吗另外，IE6在div#bottom的顶部显示了一个额外的198px。在我看来，这里有一些格式错误的HTML。我试着数数，也许我忘记了开始和结束标记的数量，但看起来div#container并没有关闭。尝试通过验证器（如W3C的HTML验证器等）运行页面并修复一些错误。这在过去帮助我解决了这些问题。祝你好运同意验证人的意见-验证通常会有所帮助。但是，如果没有，IE中的z索引有

我正试图让跳水标志杆坐在跳水池底部上方。这在除IE6和IE7之外的所有浏览器中都可以正常工作。有人能看出这里有什么问题吗

另外，IE6在div#bottom的顶部显示了一个额外的198px。

在我看来，这里有一些格式错误的HTML。我试着数数，也许我忘记了开始和结束标记的数量，但看起来div#container并没有关闭。尝试通过验证器（如W3C的HTML验证器等）运行页面并修复一些错误。这在过去帮助我解决了这些问题。祝你好运

同意验证人的意见-验证通常会有所帮助。但是，如果没有，IE中的z索引有几个指针：

1）您正在操作的z-index元素应该处于同一级别，即，您应该设置#bottom和#body的z-index

如果这不可行，那么

2） IE有时无法正确应用z索引，除非您应用它的元素具有

位置：相对。尝试将该属性应用于#底部和#主体（或#路标）
让我知道结果如何
Darko
我最近遇到了一个问题，就是在一层上显示另一层。在我的例子中，我通过编程在Javascript中创建了两个层，一个用于放置自定义控件，另一个用于在其后面创建全屏层。FF很好，bu IE始终在所有其他内容之上显示全屏层
在互联网上进行了无数次搜索，尝试了所有人的建议后，我最终让它工作的唯一方法是从两个层中删除位置：
属性，并调整边距顶部：
属性，直到得到满意的结果
有点散列，但它可以工作，在IE 8整理出所有当前的bug之前一切都会好起来。
我刚刚遇到了这个问题，我找到的修复方法（感谢Quirksmode）是给你试图设置的节点的直接父节点一个z索引，它自己的z索引小于你试图设置的节点的z索引。下面是一个应该在IE6中工作的快速示例
<html>
  <head>
    <style type="text/css">
      #AlwaysOnTop {
        background-color: red;
        color: white;
        width: 300px;
        position: fixed;
        top: 0;
        z-index: 2;
      }
      #Header {
        color: white;
        width: 100%;
        text-align: center;
        z-index: 1;
      }
    </style>
  </head>
  <body>
    <div id="Header">
      <div id="AlwaysOnTop">This will always be on top</div>
    </div>
    <div id="Content">Some long amount of text to produce a scroll bar</div>
  </body>
</html>


#始终在顶部{
背景色：红色；
颜色：白色；
宽度：300px；
位置：固定；
排名：0；
z指数：2；
}
#标题{
颜色：白色；
宽度：100%；
文本对齐：居中；
z指数：1；
}
这将永远是最重要的
生成滚动条所需的长文本量
这里的大多数答案都是错误的；有些工作，但不是因为他们所说的原因。这里有一些解释
这就是z索引的工作原理：

您可以为任何元素提供z-index
值；如果没有，则默认为auto
定位元素（即位置
属性不同于默认的静态
）与z索引
不同于自动
的元素创建新的堆叠上下文。堆叠上下文是重叠的“单位”；一个堆叠上下文要么完全位于另一个堆叠上下文之上（即，第一个堆叠上下文的每个元素都位于第二个堆叠上下文的任何元素之上），要么完全位于第二个堆叠上下文之下
在同一堆栈上下文中，比较元素的堆栈级别。具有显式z-index
值的元素将该值作为堆栈级别，其他元素从其父元素继承。堆栈级别较高的元素显示在顶部。当两个元素具有相同的堆栈级别时，通常会将DOM树中后面的元素绘制在顶部。（如果它们具有不同的位置
属性，则应用更复杂的规则。）

换句话说，当两个元素都设置了z-index
时，为了决定哪个元素将显示在顶部，您需要检查它们是否有任何也设置了z-index
的定位父元素。如果他们不这样做，或者父母都是普通人，那么z指数越高的人获胜。如果他们这样做，你需要比较父母，孩子的z-index
是不相关的
因此，z-index
决定了元素相对于其“堆叠父元素”（设置了z-index
且位置为相对，绝对或固定的最近祖先）的放置方式，但与其他元素相比并不重要；计数的是堆叠父对象的z-index
（或者可能是堆叠父对象的堆叠父对象的z-index
，等等）。在一个典型的文档中，您仅在少数元素（如下拉菜单和弹出窗口）上使用z-index
，其中没有一个包含其他元素，所有具有z-index
的元素的堆叠父元素就是整个文档，您通常可以将z-index
视为全局索引，文档级排序
与IE6/7的根本区别在于定位元素开始新的堆叠上下文，无论它们是否设置了z-index
。由于您本能地将z-index
值分配给的元素通常是绝对定位的，并且具有相对定位的父元素或相近的祖先，这将意味着您的z-index
-ed元素根本不会被比较，相反，它们定位的祖先会被比较，并且由于这些元素没有z-index集，以文件顺序为准
作为一种解决方法，您需要找出实际比较的祖先，并为它们分配一些z索引以恢复所需的顺序（通常是反向文档顺序）。通常这是通过javascript完成的-对于下拉菜单，您可以遍历菜单容器或父菜单项，并为它们指定1000、999、998等的z索引。另一种方法：当弹出或下拉菜单变为visi时
.header { 
    position: relative;
    z-index: 1001;
}
.content {
    position: relative;
    z-index: 1000;
}