Z-指数未在表内的工作,如果有对容器溢出滚动

问题描述 投票:12回答:2

我有一个定位绝对股利表以外的问题,我不是表布局的大风扇,但我发现了一个表格布局现有项目。该代码是如下

<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装上了。我希望这有帮助..

html css html-table z-index
2个回答
42
投票

Z-Index的正常工作,每一个具有Z-index属性元素也必须有任何位置集(e.g.position:相对)。另外,我想分配表两个比较位置和z索引。


1
投票

在说你要绝对定位的元素“走出去表”,你的意思,你希望它被放置在表外,不是基于表的位置?还是你的意思,你希望它位于表里面,而不是夹在表的边框或与其他内容重叠?

如果是前者,我建议在代码的其他地方移动绝对定位的DIV。为什么把它放在桌子里面,如果它不打算在那里显示?它只是使堆叠上下文和溢出性更难解决。

如果是后者,你可能需要调整或包含您的绝对定位的元素在div删除overflow-xoverflow-y性能。这是可以想象的是,浏览器仍然适用溢出裁剪规则子元素,即使他们绝对定位。

另外,请记住,z-index只是为了影响兄弟元素的堆叠顺序。元素在树上的同一水平,在你的500px的高度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);元素根节点(可能有比这更好的办法,只是一个例子)。利用这一点,或者类似的东西,你也许可以把你的小地图上涨文档树,这将阻止它裁剪。

© www.soinside.com 2019 - 2024. All rights reserved.