HTML定位元素没有空格

Question

我有两个元素（图像）

imgA是2000px高 imgB是1000px高

我将它们一个接一个地放置，然后向上移动imgB（我使用相对定位）以重叠imgA。

因此，浏览器中的窗口应该是2000px高。

然而，似乎，当放置imgA然后imgB时，浏览器为它们分配地点，即3000px hig，并且在我将imgB移动到重叠imgA之后，我在底部留下了空白= 1000px页面。

如何防止这个空白区域？

由于

Answer 1

忽略此

  

这是因为图像是块级元素。停止了   分配空间的浏览器，您只需添加：display:inline-block   到第二张图片。这将使图像脱离块结构   所以浏览器不会为它分配空格。

另外看看Relatively Absolute positioning，这对你正在做的事情非常方便。

---

的 EDITED 的

如下所述，这不起作用。请改用Relatively Absolute positioning。

Here is a jsFiddle that shows the code needed to position an image over another

Answer 2

在图片上使用display: block，然后使用position: absolute代替position: relative将imgB放在imgA上。

不要忘记将父元素指定给position: static以外的任何其他元素，以使图像相对于父元素定位。

Answer 3

为了进一步说明，您可以在这里看到“css block”的例子

http://www.tutorialswire.com/css/css-display

Answer 4

绝对定位只是您案例的特定解决方案。它可能在某些类似的情况下不起作用（例如，如果在包含div的常规内部的那两个图像之上有其他元素）。

我认为最佳解决方案是使用

margin-top: -1000px;

表示第二张图片。