位于两个部分的图像

Question

我正在尝试复制像这样的两个div上的曲棍球运动员照片 - ＆gt; Link

我是否只将照片嵌入第二个div中，然后将上边距设为负值？ 我查看了源代码，让我很困惑。

Answer 1

你走在正确的轨道上。

您描述的方法是它自己正在做的网站。见下面的代码。

.player-jumbotron-vitals__headshot {
    margin-top: -100px;
}

Answer 2

正如您在上面链接的页面的源代码中看到的那样，较小的图像包含在div中，其中player-jumbotron-vitals__headshot类具有负边距：margin-top:-100px;。所以这是实现它的第一种方式。第二种方法是使用包含position:relative的包装器，该包装器将包含具有position:absolute;和top:-100px;的较小图像。