如果容器上存在溢出滚动，则 Z-index 在表内不起作用 [英] Z-index not working inside a table if there is an overflow-scroll on container

问题描述

我在将绝对 div 定位在表格外时遇到问题，我不是表格布局的忠实粉丝，但我发现了一个具有表格布局的现有项目.代码如下

<td colspan="2" align="right" style="padding-top:3px; padding-right:15px; padding-bottom:15px;"宽度=600像素"><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'); 背景-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--]

</td></tr><tr><td><img src="P--IMG--P/welcomepanel/middelblock_roundcorners.png"/></td></tr></td>

其中 [--C--comp--C--] 是在 div 中包含图像的 fckEditor 的替换字符串，我已将该 div 的 z-index 设置为 10，但是它不想离开桌子……而且它的位置是绝对的.

请告诉我我可能做错了什么.

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

我需要小地图在桌子外面，大地图留在桌子里面，当你使用jquery在大地图上悬停时它会显示小图像，它在fckeditor上加载.我希望这会有所帮助..

解决方案

要使 z-index 正常工作，每个具有 z-index 属性的元素还必须设置任何位置(例如 position:relative ).另外，我会为表格分配一个位置和 z-index 以供两者进行比较.

I'm having a problem positioning an absolute div outside a table, I'm not a big fan of table layout but I found an existing project with a table layout. The code is as follows

<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>

Where [--C--comp--C--] is the replacement string for an fckEditor that contains an image inside a div, I have set that div's z-index to 10 but it doesn't want to go out of the table.. and its position absolute.

Please let me know what I might be doing wrong.

I've realised that the problem comes with the overflow-scroll on the td container, if you remove the overflow-y:scroll it works fine, but the problem is that I need to have that overflow since there is a lot of content inside that td. I don't know what to do now. :(..someone please help a brother out!

I need the small map to be outside the table and the big map to remain inside the table, it shows the small image when you hover on the big map using Jquery to zoom, which is loaded on the fckeditor. I hope this helps..

解决方案

For z-index to work correctly, every element that has a z-index property must also have any position set ( e.g.position:relative ). Also, I'd assign the table a position and z-index for the two to compare.

这篇关于如果容器上存在溢出滚动，则 Z-index 在表内不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！