覆盖带有圆角的元素

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>

覆盖带有圆角的元素

Overlaying Elements with rounded corners

html

css

overlay