转换HTML元素会显示在不同的位置吗？

Question

我正在用html创建一张卡片。我的目标是当我将鼠标悬停在卡片主体上时，我想显示购物车图标，但它确实显示了与我预期的不同的地方。我希望它直接显示在卡片的页脚上。

​

下面是react组件：

  <div className="card-body ">
          <div className="card-img-container translate-cart-btn">
            <Link to={`/shop/${title}/${name}`}>
              <img src={imageUrl} alt={name} className="card-img" />
            </Link>
          </div>

          <button
            className="cart-btn "
            onClick={addToCart}
            disabled={inCart ? true : false}
          >
            {addedToCart ? (
              <p disabled>In Cart</p>
            ) : (
              <TiShoppingCart className="icon" />
            )}
          </button>
        </div>

        <div className="card-footer">
          <span className="name">{name}</span>
          <span>
            <div className="price-and-dollar">
              <span className="dollar-sign">$</span>
              <span className="price"> {price}</span>
            </div>
          </span>
        </div>
      </div>

下面是css：

.collection-item {
  background-color: $gray-700;
  display: flex;
  flex-direction: column;
  width: 23vw;
  .card-body {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    &:hover {
      .card-img {
        border: 0.3rem solid $main-black;
        // box-shadow: 2px 0 5px 0 rgb(136, 12, 12);
      }
      .cart-btn {
        transform: translate(0, 0);
      }
    }
  }
}
.card-img-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
  &:hover {
    .card-img {
      transform: scale(1.2);
    }
  }

  .card-img {
    transition: all 1s linear;

    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 21rem;
    height: 24rem;
  }
}

// .card-body:hover .cart-btn {
//   transform: translate(0, 0);
// }

.card-footer {
  border-top: transparent;
  transition: all 1s linear;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-evenly;
  font-family: Alice-Regular;
  font-weight: 600;
  color: white;

  .price-and-dollar {
    display: flex;
    text-align: right !important;
    padding-right: 0.5rem;
  }
  .dollar-sign {
    color: black;
  }
  .price {
    font-size: 2rem;
    font-family: Lobster-Regular;
    color: rgb(167, 37, 37);
    font-weight: bold;
  }
}
.translate-cart-btn:hover .cart-btn {
  position: relative;
  transform: translate(0, 0);
}

.cart-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 0.2rem 0.4rem;
  font-size: 1rem;
  border-radius: 0.5rem 0 0 0;
  transform: translate(100%, 100%); /*move right and bottom */
  transition: all 1s linear;
  // }
  // .card-img-container:hover .cart-btn {
  //   transform: translate(0, 0);
  // }
  .cart-btn:hover {
    color: green;
    cursor: pointer;
  }
  .icon {
    height: 2.4rem;
    width: 2.8rem;
  }
}

Answer 1

我不确定这是否能解决你的问题，但是试试这个：

.card-body{
   position: relative;
}

出现这个问题的原因是，当使用'position :absolute‘时，它被绝对定位到没有position :static的最接近的父元素(对于所有元素，static都是浏览器的默认设置)。而离你最近的父母是..card body