定位一个重叠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;
    }
  }
}