如果容器上有溢出滚动，则Z-index在表内不起作用

Question

我在将一个绝对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--]是包含div内部图像的fckEditor的替换字符串，我已将div的z-index设置为10，但它不想离开表..并且绝对的位置。

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

我已经意识到td容器上的溢出滚动问题，如果你移除overflow-y:scroll它工作正常，但问题是我需要有溢出，因为有很多那个td里面的内容。我现在不知道该怎么办。 :( ..有人请帮助一个兄弟！

我需要将小地图放在桌子外面并将大地图保留在桌子内，当你使用Jquery悬停在大地图上时，它会显示小图像，这是在fckeditor上加载的。我希望这会有所帮助..

Answer 1

为了使z-index正常工作，具有z-index属性的每个元素也必须具有任何位置集（例如，position：relative）。另外，我会为表分配一个位置和z-index来进行比较。

Answer 2

在说你想要绝对定位元素“走出桌面”时，你的意思是你希望它被放置在桌子之外，而不是基于桌子的位置吗？或者您的意思是您希望它位于表格内部，但不会剪裁到表格的边框或与其他内容重叠？

如果是前者，我建议将绝对定位的DIV移动到代码中的其他位置。如果它不会在那里显示，为什么要把它放在桌子里？它只会使堆叠上下文和溢出属性更难解决。

如果是后者，您可能需要调整或删除包含绝对定位元素的div上的overflow-x和overflow-y属性。可以想象，浏览器仍会将溢出剪辑规则应用于子元素，即使它们处于绝对位置。

另请注意，z-index仅用于影响兄弟元素的堆叠顺序。位于树的同一级别的元素，换句话说，500px-height div中的其他元素将根据其z顺序堆叠，但父节点和子节点按不同的规则播放。

如果这个答案没有帮助，那么我可能会误解你想做什么。你能张贴一张它的表现如何并描述你喜欢它的表现吗？

编辑回复发布的图片：

我认为在这种情况下你想做的是以某种方式将小地图放在滚动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--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>

如果没有，您是否可以更改插入的代码，以便在代码中的更高级别创建小地图？例如，您可以使用document.getElementsByTagName("body")[0].appendChild(element);向根节点添加元素（可能有更好的方法，只是一个示例）。使用它或类似的东西，你可以将你的小地图放在文档树的较高位置，这样可以防止它被裁剪。