如果容器上存在溢出滚动，Z 索引在表内不起作用

发布于 2024-11-02 20:32:11 字数 1629 浏览 1 评论 0原文

我在表格外定位绝对 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 上，我希望这会有所帮助。

原文

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!

enter image description here

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

原来分手还会想你 2024-11-09 20:32:11

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

回复收藏 0 原文

夏花。依旧 2024-11-09 20:32:11

当你说你想要绝对定位元素“走出表格”时，你的意思是你希望它位于表格之外，而不是基于表格的位置吗？或者您的意思是希望它位于表格内部，但不剪切到表格边框或与其他内容重叠？

如果是前者，我建议将绝对定位的 DIV 移到代码中的其他位置。如果它不会显示在那里，为什么要把它放在表格里呢？它只会使堆叠上下文和溢出属性更难解决。

如果是后者，您可能需要调整或删除包含绝对定位元素的 div 上的 overflow-x 和 overflow-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); 将元素添加到根节点（可能有比这更好的方法，只是一个示例）。使用它或类似的东西，您可以将小地图放在文档树中更高的位置，这将防止它被剪切。

In saying that you want to absolutely positioned element "to go out of the table", do you mean that you want it to be positioned outside the table, not based on the table's location? Or do you mean you want it located inside the table, but not clipped to the table's borders or overlapped with other content?

If it's the former, I'd suggest moving the absolutely-positioned DIV elsewhere in the code. Why put it inside the table if it's not going to be shown there? It just makes the stacking context and overflow properties harder to work around.

If it's the latter, you might want to adjust or remove the overflow-x and overflow-y properties on the div that contains your absolutely positioned element. It's conceivable that the browser would still apply the overflow clipping rules to child elements, even if they're absolutely positioned.

Also, keep in mind that z-index is only meant to affect the stacking order of sibling elements. Elements that are on the same level of the tree, in other words other elements inside your 500px-height div, will be stacked according to their z-order, but parent and child nodes play by different rules.

If this answer doesn't help, then maybe I'm misunderstanding what you want to do. Can you post a picture of how it's behaving and describe how you'd like it to behave?

Edit in reply to picture being posted:

I think what you want to do in this case is to get the small map outside of the scroll DIV somehow. Can you change this...

<div height="500px" width="580px" style="width:600px; text-align:left; height:500px; overflow-y:scroll; overflow-x:none;">
    [--C--comp--C--]
</div>

...to something like this?

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

If not, could you change the code that's getting inserted so that it creates the small map at a higher level in the code? For example, you can add elements to the root node using document.getElementsByTagName("body")[0].appendChild(element); (there might be a better way than that, just an example). Using that, or something like that, you might be able to put your small map higher up in the document tree, which would prevent it from clipping.

回复收藏 0 原文

~没有更多了~