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;
    }
  }
}

定位圆圈img重叠div

1 个答案: