如何将HTML元素放置在另一个元素之上，而不影响下面的元素的布局？ [英] How to position an HTML element on top of another element without affecting the layout of the element(s) beneath?

问题描述

一般来说，HTML布局是基于流的。每个元素定位在它之前，在它的右边或它下面。有很多例外，当然，你可以通过玩风格，但即使如此，如果你改变了一些东西的顺序，大多数东西流动周围，并为它留出空间。

但是偶尔我看到的行为是非常不同的，如页面出现的浮动在屏幕中间的对话框，它们不受div的尺寸约束，不再替换它们周围的其他布局元素。

我试图找出一种类似的方法，但不完全一样。我有一个表，我用来显示网格（是的，实际上使用表正确），我想在其中一个网格单元格上面放置一个图像。我不能把它放在单元格中，因为它大于单元格，我不想拉伸我的网格，但我想要它总是显示在相对于网格相同的位置，即使浏览器窗口滚动或调整大小。

我想有一些方法，我可以做到这一点。如果我把ID或类放在< TD> 单元格之一上，如何创建< Image> < TD> 或甚至其所属的< TABLE> 但是总是位于< TD> 单元格的顶部，不会移动任何内容或影响其布局？

解决方案

要展开CJGreen和Napolux的建议，您仍然可以将图像放在表格单元格中，但是绝对定位。

[Edit]由于定义表格单元格的位置被认为是非法的（因此被Firefox忽略），你可以将每个< td> $ c>< div> 元素（最好使用JS，所以你不必进行大量更改），然后设置< div> position to relative：

 <$ c> 
 $ c> table td> div {
 position：relative; 
} 
 table td> div img {
 position：absolute; 
 z-index：999; 
} 
  

JS： b

  $（document）.ready（function（）{
 $（td）。wrapInner（'< div />'） ; 
}）; 
  

请参阅（更新）fiddle here - http://jsfiddle.net/teddyrised/qyu3g/ ​​

Generally speaking, HTML layout is flow-based. Each element gets positioned after the one before it, either to the right of it or beneath it. There are plenty of exceptions, of course, that you can get by playing with styles, but even then, if you change the order of something, most things "flow" around it and make room for it.

But occasionally I see things that behave very differently, such as pages coming up with "dialog boxes" that float in the middle of the screen, that aren't constrained by the dimensions of the div they're parented by and don't displace other layout elements around them.

I'm trying to figure out a way to do something similar, but not quite the same. I've got a table that I'm using to display a grid (yes, actually using tables correctly) and I'd like to place an image on top of one of the grid cells. I can't put it in the cell, because it's larger than the cell and I don't want to stretch my grid out, but I want it to always display at the same position relative to the grid, even if the browser window scrolls or is resized.

I figure there has to be some way that I can do this. If I put an ID or Class on one of the <TD> cells, how do I create an <Image> that is not part of the <TD> or even the <TABLE> that it belongs to, but will always position itself over the top of that <TD> cell without displacing anything or affecting its layout?

解决方案

To expand on both CJGreen and Napolux's suggestions, you can still place the image in the table cell, but position it absolutely.

[Edit] Since defining the position of table cells is supposedly illegal (therefore ignored by Firefox), you can wrap the content of each <td> in a <div> element (preferably with JS so you don't have to make massive changes) and then set the <div> position to relative:

CSS:

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

JS:

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

See the (updated) fiddle here - http://jsfiddle.net/teddyrised/qyu3g/

这篇关于如何将HTML元素放置在另一个元素之上，而不影响下面的元素的布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！