html - 没有空格的HTML定位元素

Question

我有两个元素（图片）

imgA 高 2000 像素 imgB 高 1000 像素

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

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

但是，似乎在放置 imgA 和 imgB 时，浏览器会为它们分配位置，即 3000px hig，并且在我将 imgB 向上移动以重叠 imgA 后，我在页面底部留下了一个空白空间 =1000px .

如何防止这个空白？

谢谢

score 4 · Accepted Answer

忽略这个

这是因为图像是块级元素。要阻止浏览器分配空间，您只需将：添加display:inline-block 到第二张图像。这将使图像脱离块结构，因此浏览器不会为其分配空白。

也看看相对绝对定位，它对你正在做的事情非常方便。

已编辑

如下所述，这不起作用。改用相对绝对定位。

score 1 · Accepted Answer

在您的图像上使用display: block，然后使用position: absolute而不是position: relative将 imgB 定位在 imgA 上。

不要忘记将父元素分配给除position: static使图像相对于父元素定位之外的任何东西。

score 0 · Accepted Answer

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

我相信最好的解决方案是使用

margin-top: -1000px;

对于第二张图片。

score 0 · Accepted Answer

如需进一步说明，您可以在此处查看“css 块”的示例

4 回答 4