Z-index不在表内工作 [英] Z-index not working inside a table

问题描述

我有一个问题，将绝对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>

- ]是一个fckEditor的替换字符串，其中包含一个图像在一个div，我已经将div的z索引设置为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 doesnt want to go out of the table.. and its position absolute.

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

Please let me know what i might be doing wrong.

提前谢谢
D ~~

Thank you in advance D~~

我意识到问题出现在td容器上的溢出滚动，如果u删除overflow-y：scroll it工作正常，但问题是，我需要有溢出，因为有很多内容里面的td。我不知道现在做什么。 :( ..有人请帮助一个兄弟出来!!

I've realised that the problem comes with the overflow-scroll on the td container, if u 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 dont know what to do now. :(..someone pleaseee 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属性的元素必须也有位置：relative或position：absolute。另外，我为表分配一个位置和z-index来进行比较。

For z-index to work correctly, every element that has a z-index property must also have either position:relative or position:absolute. Also, I'd assign the table a position and z-index for the two to compare.

这篇关于Z-index不在表内工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！