如何将HTML元素放在另一个元素之上而不影响下面元素的布局？

概述一般来说, HTML布局是基于流的.每个元素都位于它之前的元素之后,或者在它的右边或者在它之下.当然,有很多例外,你可以通过玩风格来获得,但即便如此,如果你改变了某些东西的顺序,大多数东西会“流动”它并为它腾出空间. 但偶尔我会看到表现得非常不同的东西,例如页面上出现浮动在屏幕中间的“对话框”,这些对话框不受他们所属的div的维度的约束,也不会取代围绕它们的其他布局元素. 我试图想办法做类似的事情 一般来说,HTML布局是基于流的.每个元素都位于它之前的元素之后,或者在它的右边或者在它之下.当然,有很多例外,你可以通过玩风格来获得,但即便如此,如果你改变了某些东西的顺序,大多数东西会“流动”它并为它腾出空间.

但偶尔我会看到表现得非常不同的东西,例如页面上出现浮动在屏幕中间的“对话框”,这些对话框不受他们所属的div的维度的约束,也不会取代围绕它们的其他布局元素.

我试图想办法做类似的事情,但不完全一样.我有一张桌子用于显示网格(是的,实际上正确地使用了表格),我想在其中一个网格单元格上放置一个图像.我不能把它放在单元格中,因为它比单元格大,我不想拉伸网格,但我希望它始终显示在相对于网格的相同位置,即使浏览器窗口滚动或者调整大小.

我认为必须有一些方法可以做到这一点.如果我在其中一个< TD>上添加ID或类.单元格,如何创建< Image>这不是< TD>的一部分.或甚至< table>它属于,但总是将自己定位在< TD>的顶部.单元格没有取代任何东西或影响其布局？

解决方法 要扩展CJGreen和Napolux的建议,您仍然可以将图像放在表格单元格中,但绝对可以放置它.

[编辑]由于定义表格单元格的位置被认为是非法的(因此被firefox忽略),您可以包装每个< td>的内容.在< div>中元素(最好使用Js,因此您不必进行大量更改)然后设置< div>对亲属的立场：

CSS：

table td > div {    position: relative;}table td > div img {    position: absolute;       z-index: 999;}

Js：

$(document).ready(function() {   $("td").wrAPInner('<div />'); });

在这里看到(更新的)小提琴 – http://jsfiddle.net/teddyrised/qyu3g/

总结

以上是内存溢出为你收集整理的如何将HTML元素放在另一个元素之上而不影响下面元素的布局？全部内容，希望文章能够帮你解决如何将HTML元素放在另一个元素之上而不影响下面元素的布局？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。