html - 如何在不使用负边距的情况下实现这种突出的图像布局？

Question

这是布局图像：

正如您在图像中看到的，手机的图像从蓝色容器中伸出。

我尝试了几件事，例如：

我尝试使用一个有 5 行的网格，其中一个<div>标签扩展了所有行，并将其背景设置为电话图像。然后我将蓝色背景框设置为仅使用 2-4 行。

这在某种程度上起到了作用，但是当浏览器窗口调整大小时，图像开始缩小并以一种时髦的方式定位。

作为 CSS 的新手，我想避免负边距，因为我读过它们是“邪恶的”。

有没有办法以干净/非hacky的方式完成此任务？

标签： htmlcss

Answer 1

如果您不想使用负边距（在这种情况下很好）。您可以尝试将这些样式赋予您的图像。

img {
  position: relative;
  top: -100px;
}

您可以在此处了解有关“位置”属性的更多信息。对于初学者来说，了解它的工作原理非常重要。