没有空格的HTML定位元素

Question

我有两个元素(图片)

imgA 为 2000px 高imgB 为 1000px 高

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

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

但是，看起来，当放置 imgA 然后放置 imgB 时，浏览器会为它们分配位置，即 3000px hig，并且在我将 imgB 向上移动与 imgA 重叠后，我在底部留下了一个空白空间 =1000px页面的。

如何避免出现这种空白？

谢谢

Answer 1

忽略这个

This is because the images are block level elements. To stop the browser from allocating space you can just add: display:inline-block to the second image. This will bring the image out of block structure and so the browser will not allocate it whitespace.

另请查看 Relatively Absolute positioning ，这对于您正在做的事情来说非常方便。

---

已编辑

正如下面评论的那样，这是行不通的。请改用 Relatively Absolute positioning .

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