Html 如果容器上存在溢出滚动，则 Z-index 在表内不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5744801/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Z-index not working inside a table if there is an overflow-scroll on container
提问by Dee-M
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
我在将绝对 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>
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.
在[--C--comp--C--]div 中包含图像的 fckEditor 的替换字符串在哪里，我已将该 div 的 z-index 设置为 10，但它不想从表中取出......及其绝对位置。
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:scrollit 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!
我已经意识到问题在于 td 容器上的溢出滚动，如果您删除overflow-y:scroll它，它可以正常工作，但问题是我需要溢出，因为该 td 中有很多内容。我现在不知道该怎么办。:(..有人请帮助兄弟！
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..
我需要小地图在表格外，大地图保留在表格内，当您使用 Jquery 将鼠标悬停在大地图上进行缩放时，它会显示小图像，该图像已加载到 fckeditor 上。我希望这有帮助..
回答by locrizak
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 正常工作，每个具有 z-index 属性的元素还必须设置任何位置（ egposition:relative ）。另外，我会为表格分配一个位置和 z-index 以供两者进行比较。
回答by Joshua Carmody
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.
如果是前者，我建议将绝对定位的 DIV 移到代码中的其他位置。如果它不打算在那里显示，为什么要把它放在桌子里面？它只会使堆栈上下文和溢出属性更难解决。
If it's the latter, you might want to adjust or remove the overflow-xand overflow-yproperties 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.
如果是后者，您可能需要调整或删除包含绝对定位元素的 div 上的overflow-x和overflow-y属性。可以想象，浏览器仍然会将溢出裁剪规则应用于子元素，即使它们是绝对定位的。
Also, keep in mind that z-indexis only meant to affect the stacking order of siblingelements. 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.
另外，请记住，这z-index只是为了影响兄弟元素的堆叠顺序。位于树同一层的元素，即 500px 高度 div 内的其他元素，将根据它们的 z 顺序堆叠，但父节点和子节点遵循不同的规则。
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 之外获取小地图。能不能改一下...
<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.
如果没有，您能否更改插入的代码，以便它在代码的更高级别创建小地图？例如，您可以使用document.getElementsByTagName("body")[0].appendChild(element);（可能有比这更好的方法，只是一个示例）将元素添加到根节点。使用它或类似的东西，您可以将小地图放在文档树中的更高位置，这将防止它被剪裁。
