html - 用圆角覆盖元素

Question

我正在寻找 html 屏幕的解决方案。它包含两个块，下面的一个与上面的一个重叠。

我知道如何制作圆角，但不知道如何重叠两个 div。

提前致谢！

Answer 1

方法之一：

.container {
  display: grid;
  justify-content: center;
}

.content {
  border-radius: 10px;
  position: relative;
  z-index: 2;
  top: -20px;
  text-align: center;
  height: 150px;
  background-color: whitesmoke;
  padding: 1em;
}

<div class="container">
  <image src="https://picsum.photos/200" />
  <div class="content">text</div>
</div>