css - 定位一个圆形img重叠div

Question

我目前正在学习 React，所以我正在构建一个简单的搜索网站。您可以在其中使用 TVMaze API 搜索电视节目。

我试图将一个 img 与下面的 div 重叠以产生这种效果: 目前我只有这个:

现在我的问题是如何让图片重叠？我“知道”我应该使用 z-index 使一个超过另一个，但我不确定如何将 img 移动到底层 div 上。

这是我在我的 React 组件中的 render() 中返回的:

    return (
  <div>
    {show.image !== null && (
      <div className="result-container">
        <img className="result-poster" src={show.image.medium} alt="" />

        <div className="result-card">
          <h2 className="result-title">{show.name}</h2>
          <div className="result-ratings">
            <i className="material-icons">star_border</i>
            <h3 className="result-rating">
              {show.rating.average === null && "N/A"}
              {show.rating.average !== null && show.rating.average}
            </h3>
          </div>
        </div>
      </div>
    )}
  </div>
);

以及对应的scss:

.result-container {
width: 300px;
margin: 2rem;
display: flex;
flex-direction: row;
justify-content: space-around;
text-align: center;
.result-poster {
    width: 100px;
    height: 100px;
    z-index: 2;
    border-radius: 50%;
    background-size: cover;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.result-card {
    width: 200px;
    z-index: 1;
    height: 50px;
    padding-top: 1rem;
    background: #eee;
    border-radius: 2px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    .result-ratings {
        display: flex;
        justify-content: space-around;
        align-content: center;
    }
    i,
    h3,
    h2 {
        margin: 0;
        font-size: 1rem;
    }
}

它看起来也像 img 中的图片以某种方式扭曲，我也不知道如何“撤消”。

非常感谢您的帮助，因为我对这种开发还很陌生。

Answer 1

这是 css，如果您需要更多帮助，请告诉我。

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.result-container {
width: 300px;
margin: 2rem;
display: flex;
align-items: center;
.result-poster {
    width: 100px;
    height: 100px;
    z-index: 2;
    border-radius: 50%;
    background-size: cover;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}
.result-card {
    width: 200px;
    z-index: 1;
    height: 80px;
    padding-top: 1rem;
    padding-left: 60px;
    padding-right: 20px;
    margin-left: -50px;
    background: #eee;
    border-radius: 2px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    display: flex;
    justify-content: flex-end;
    .result-ratings {
        display: flex;
        justify-content: space-around;
        align-content: center;
    }
    i,
    h3,
    h2 {
        margin: 0;
        font-size: 1rem;
    }
  }
}