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

问题描述

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

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>

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

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.

我已经意识到问题与td容器上的溢出滚动有关，如果您删除overflow-y:scroll，它可以正常工作，但是问题是由于内容很多，我需要溢出在那个TD里面.我现在不知道该怎么办. :( ..某人请帮一个兄弟！

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!

我需要将小地图放置在表外，而将大地图保留在表内，当您使用Jquery缩放将其悬停在大地图上时，它会显示小图像，并加载到fckeditor上.希望对您有所帮助.

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

推荐答案

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

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