Css Firefox：溢出如何在z索引和位置固定的情况下工作？
我对Firefox3.6中用于z索引、溢出隐藏和位置固定的CSS是如何协同工作的感到困惑。考虑这个例子： 第一个DIV.fix_z0位置固定，z-索引为0，溢出隐藏。内部为DIV.abs_z1，位置绝对，z指数为1。里面是DIV.fix_z2，位置固定，z索引为2。我希望所有的.fix_z2都是可见的，即使它在.fix_z0的视口之外，因为它是固定的，并且具有比基本DIV更高的z索引 在IE 8中，这与预期的一样有效，但在FF 3.6中，DIV.fix_z2被.fix_z0的边界截断。两个元素都是固定的，但其中一个元素嵌套在另一个元素中。W3C规范指出应该从文档流中删除固定元素，但是当它们嵌套时会发生什么呢？另外，由于包含的元素.abs_z1具有更高的z索引，因此应该设置一个新的z索引上下文，并且.abs_z1中的所有内容都应该位于.fix_z0之上，从而使.fix_z2上的z索引不相关，但我将其包括在内，以查看它是否起到了作用 复杂的因素是z指数。如果我们再举一个例子，inside.fix_z0一个DIV.abs_znone，位置绝对，没有z索引。在这里面，我们将DIV.fix_z1与位置固定和z索引1放在一起。现在DIV.fix_z1没有被.fix_z0夹住。在我看来，要么两者都应该剪掉，要么两者都不应该剪掉。这是一个bug还是我误解了CSS的规则？下面是要复制的代码Css Firefox：溢出如何在z索引和位置固定的情况下工作？,css,firefox,overflow,position,z-index,Css,Firefox,Overflow,Position,Z Index,我对Firefox3.6中用于z索引、溢出隐藏和位置固定的CSS是如何协同工作的感到困惑。考虑这个例子： 第一个DIV.fix_z0位置固定，z-索引为0，溢出隐藏。内部为DIV.abs_z1，位置绝对，z指数为1。里面是DIV.fix_z2，位置固定，z索引为2。我希望所有的.fix_z2都是可见的，即使它在.fix_z0的视口之外，因为它是固定的，并且具有比基本DIV更高的z索引 在IE 8中，这与预期的一样有效，但在FF 3.6中，DIV.fix_z2被.fix_z0的边界截断。两个元素都
<!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>
一句话：我仍然在寻找一些答案。IE或FF是否符合这里的标准？是什么导致FF中的一个DIV被剪裁，而另一个DIV没有被剪裁？我目前的看法是IE对更改是正确的，FF行为是错误的。看起来FF显示是正确的。如果在元素上有“溢出：隐藏”，则仅当所有子元素位于父对象的边界内时，才会显示它们 FF显示似乎是正确的。如果在元素上有“溢出：隐藏”，则仅当所有子元素位于父对象的边界内时，才会显示它们 有人问了这个问题的一个变体，其中一个回答者给出了答案，但那是IE7。我尝试了doctype建议，但没有立即产生任何效果
顺便说一句，在您的代码示例中，如果您给.abs_znone一个z索引，它会将它绑定到其父级，并且它的行为正常。也许是一个线索？有人问了这个问题的一个变体，其中一个回答者给出了答案，但这是针对IE7的。我尝试了doctype建议，但没有立即产生任何效果
顺便说一句，在您的代码示例中，如果您给.abs_znone一个z索引，它会将它绑定到其父级，并且它的行为正常。也许是一个线索？我同意你的逻辑，但如果这是真的，那么fix_z1也应该剪掉，因为它是fix_z0的后代。我同意你的逻辑，但如果这是真的，那么fix_z1也应该被剪裁，因为它是fix_z0的后代。这些问题的确涉及到z指数，但与我的情况不同。他们更多的是关于分层，我的问题是剪辑。在我的例子中，IE实际上是在做我想要做的事情，而FF不是，因此我不想用IE解决任何问题。z索引似乎有一些c
FF和我对目前关于IE行为是否符合标准的帖子存在一些分歧。请参阅问题中我的更新。这些问题的确涉及z索引，但与我的情况不同。他们更多的是关于分层，我的问题是剪辑。在我的例子中，IE实际上是在做我想做的事情，而FF不是，因此我不想用IE解决任何问题。z索引似乎在FF中有一些剪裁副作用，我对当前帖子中关于IE行为是否符合标准的问题有一些不同意见。请参阅问题中的我的更新。