Html 如果容器上存在溢出滚动，则Z索引在表中不起作用

我在将绝对div放在表外时遇到了问题，我不太喜欢表布局，但我发现了一个现有的带有表布局的项目。代码如下

<td colspan="2" align="right" style="padding-top:3px; padding-right:15px; padding-bottom:15px;" width="600px">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr><td height="37px" width="600px" style="background-image:url('P--IMG--P/welcomepanel/header.png'); background-repeat:no-repeat; background-position:bottom left;"><span class="heading" id="I--heading_text--I" style="padding-top:3px;"></span></td></tr>
        <tr>
            <td align='left' valign='middle' width="600px" height="522px" style="background-image:url('P--IMG--P/welcomepanel/middelblock_repeat.png'); background-repeat: repeat-y; padding-top:0px">
                <div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
                    [--C--comp--C--]
                </div>
            </td>
        </tr>
        <tr><td><img src="P--IMG--P/welcomepanel/middelblock_roundcorners.png"/></td></tr>
    </table>
</td>

[--C--comp--C--]

其中，

[--C--comp--C-->

是在div中包含图像的fckEditor的替换字符串，我已将该div的z索引设置为10，但它不想超出表。。它的位置是绝对的

请让我知道我可能做错了什么

我已经意识到问题来自td容器上的溢出滚动，如果您删除

overflow-y:scroll

，它工作正常，但问题是我需要溢出，因为td中有很多内容。我不知道现在该怎么办（…有人请帮帮一个兄弟

---

我需要将小地图放在表外，而将大地图放在表内，当您在大地图上使用Jquery缩放时，它会显示小图像，这是加载到fckeditor上的。我希望这会有所帮助。

要使z-index正常工作，每个具有z-index属性的元素也必须设置任何位置（例如位置：相对）。此外，我会给表格分配一个位置和z索引，以便两者进行比较。

表示您希望绝对定位元素“以脱离表格”，您的意思是希望它位于表外，而不是基于表的位置？还是希望它位于表内，但不剪切到表的边框或与其他内容重叠

如果是前者，我建议将绝对定位的DIV移到代码中的其他位置。如果不在表中显示，为什么要将其放在表中？这只会使堆栈上下文和溢出属性更难处理

如果是后者，则可能需要调整或删除包含绝对定位元素的div上的

overflow-x

和

overflow-y

属性。可以想象，浏览器仍会将溢出剪裁规则应用于子元素，即使它们绝对定位

另外，请记住，

z-index

只会影响同级元素的堆叠顺序。位于树的同一级别上的元素，即500px height div中的其他元素，将根据其z顺序进行堆叠，但父节点和子节点按不同的规则进行操作

如果这个答案没有帮助，那么也许我误解了你想要做什么。你能发布一张它的行为图片并描述一下你希望它的行为吗

编辑以回复正在发布的图片：

我想在这种情况下，你要做的是以某种方式将小地图移到scroll DIV之外。你能改变这个吗

<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
    [--C--comp--C--]
</div>

[--C--comp--C--]

…像这样的事

[--C--compSmallMap--C--] <!-- Small map code goes here -->
<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
    [--C--compBigMap--C--] <!-- Big map code goes here -->
</div>

[--C--compSmallMap--C--]
[--C--compBigMap--C--]

---

如果没有，您能否更改插入的代码，以便它在代码的更高级别创建小映射？例如，您可以使用

document.getElementsByTagName（“body”）[0].appendChild（element）；

（可能有更好的方法，举个例子）。使用该功能或类似功能，您可以将小地图放在文档树的更高位置，从而防止其被剪切。

z-index

与“跳出表格”无关，只有

position:absolute

有。您的代码中

position:absolute

在哪里？顺便说一句，您的HTML无效。HTML像素长度没有得到

px

后缀。错误：

height=“500px”

。正确：

height=“500”

。而且你的CSS宽度/高度与HTML的不一样。不要两者都使用，只使用一个或另一个。谢谢你提供的信息，但正如我所说，我找到了原样的代码，但我肯定会修复它。我已经发布了图片，我希望它能有所帮助，小地图必须显示在页面顶部的表外，大地图应该显示出来d留在表中。@Dee-M谢谢你的图片。我在回答中添加了一个额外的建议。“z-index只会影响同级树上的同级元素[…]的堆叠顺序”-这是不正确的；它会影响同级树中同级元素的堆叠顺序。非常感谢！！：d你让我开心了一天小修正：如果必须设置位置，则元素必须服从z索引。任何值都有效，而不仅仅是相对值或绝对值。