如果容器上有溢出滚动,则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属性的每个元素也必须具有任何位置集(egposition:relative).另外,我会为表分配一个位置和z-index来进行比较.