Question

我很担心z-index，溢出隐藏和固定位置的CSS如何在Firefox 3.6中一起工作。考虑这个例子：

第一个DIV.fix_z0是用z-index 0固定的位置，并且隐藏了溢出。里面是DIV.abs_z1，位置绝对，z-index 1.里面是DIV.fix_z2，位置固定，z-index 2.我希望所有.fix_z2都可见，即使它是在.fix_z0的视口之外，因为它既固定又具有比基本DIV更高的z指数。

在IE 8中，这按预期工作，但在FF 3.6中，DIV.fix_z2被.fix_z0的边界限制。两个元素都是固定的，但是一个元素嵌套在另一个元素中。 W3C规范表明应该从文档流中删除固定元素，但是当它们嵌套时会发生什么？此外，由于包含元素.abs_z1具有更高的z-index，因此应设置新的z-index上下文，.abs_z1中的所有内容都应高于.fix_z0（使z-index成为在.fix_z2无关紧要，但我把它包括在内，看它是否有所作为。）

复杂因素是z指数。如果我们采用另一个例子，在.fix_z0内DIV.abs_znone位置绝对且没有z-index。在此内容中，我们将DIV.fix_z1置于固定位置和z-index 1.现在DIV.fix_z1不会被.fix_z0限制。在我看来，要么两者都应该被剪裁，要么两者都不应被剪裁。这是一个错误还是我误解了CSS的规则？下面是重现的代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Z-Index Woes</title>
<style type="text/css">
    body {
        background-color: black;
    }

    div.fix_z0 {
        position: fixed;
        left: 100px;
        top: 100px;
        bottom: 100px;
        right: 100px;
        background-color: #606060;
        overflow: hidden;
        z-index: 0;
    }

    div.abs_z1 {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: #550000;
        z-index: 1;
    }

    div.fix_z2 {
        position: fixed;
        left: 50px;
        top: 50px;
        width: 150px;
        height: 150px;
        background-color: #888800;
        z-index: 2;
    }

    div.abs_znone {
        position: absolute;
        right: 50px;
        bottom: 50px;
        width: 200px;
        height: 200px;
        background-color: #005500;
    }


    div.fix_z1 {
        position: fixed;
        right: 50px;
        bottom: 50px;
        width: 150px;
        height: 150px;
        background-color: #888800;
        z-index: 1;
    }

    p {
        position: absolute;
        font-size: 12pt;
        color: #EFEFEF;
        margin: 0;
        padding: 0;
    }

    p.center {
        text-align: center;
        width: 100%;
    }

    p.right {
        right: 0;
    }

    p.bottom {
        bottom: 0;
    }

</style>
</head>
<body>
    <div class="fix_z0">
        <p class="center">pos: fixed, z:0, overflow: hidden</p>
        <div class="abs_z1">
            <p class="right">pos: abs, z:1</p>
            <div class="fix_z2">
                <p class="right bottom">pos: fix, z:2</p>
            </div>
        </div>
        <div class="abs_znone">
            <p>pos: abs, z: none</p>
            <div class="fix_z1">
                <p>pos: fix, z:1</p>
            </div>
        </div>
    </div>
</body>
</html>

更新11/18/10 ：到目前为止，这两个回复似乎都表明.fix_z2和.fix_z1应该被.fix_z0限制。这将使IE8 100％错误，并且示例代码上的FF 50％错误。

我认为两个DIV都不应该被修剪，因为它们是固定的。 W3C建立固定定位作为绝对和绝对定位元素的子集：

为正常流动儿童和绝对（但不是固定的）定位的后代建立一个新的包含块。 [W3C]

因此，在我看来，.fix_z0或.abs_z1或.abs_znone都不应该建立一个新的包含块，用于剪切固定内容。

W3C Z-Index标准值为：

integer：此整数是当前堆叠上下文中生成的框的堆栈级别。该框还建立了一个本地堆栈上下文，其堆栈级别为“0”。

auto：当前堆叠上下文中生成框的堆栈级别与其父级框相同。该框不会建立新的本地堆叠上下文。

http://www.w3.org/TR/CSS21/visuren.html#z-index

我不明白为什么z-index会影响FF，但它会产生以下影响：由于.abs_znone没有z-index，因此它与其父.fix_z0和{具有相同的堆叠上下文{1}}将具有与.fix_z1的任何子项相关的z索引。结果.fix_z0未被DIV.fix_z1剪切。相反，.fix_z0建立了一个新的堆叠上下文，因为它有一个z索引，而.abs_z1将具有与.fix_z2的任何子项相关的z索引，但由于某种原因，这导致被.abs_z1

裁剪的.fix_z2

结论：我仍然在寻找一些答案。 IE或FF是否符合标准？在FF中的一个DIV上导致削波的原因是什么？我目前的看法是IE是正确的（改变）并且FF行为是错误的。

Answer 1

看起来FF显示是正确的。如果您有溢出：隐藏在元素上，只有在父对象的边界内，才会显示所有子元素。

Answer 2

这个问题的一个变体被问到here，其中一个回答者给了this link来解决，但这是针对IE7的。我尝试了doctype建议，但它没有立即产生结果。

（顺便说一下，在你的代码示例中，如果你给.abs_znone一个z-index，那就把它与它的父级绑在一起，它的行为是正确的。也许是一个线索？）

Firefox：溢出如何与z-index和位置固定？

2 个答案: