将绝对元素定位在其他元素之上答案

【问题标题】：Positioning an absolute element above other elements将绝对元素定位在其他元素之上
【发布时间】：2022-01-01 13:20:14
【问题描述】：

所以我正在构建这个前端站点，但我无法将购物车 div 定位在其余元素之上。起初我尝试使用 z-index 但显然这不适用于具有位置样式的元素。我在父级上使用相对位置，在子级上使用绝对位置，因此它总是出现在购物车图标下。有没有其他方法可以强制将元素放在顶部，或者我应该改变我定位 div 的方式。

.right-container {
  padding: 1rem;
}

.account-container {
  display: flex;
  align-items: center;
  position: relative;
}

.cart-icon-container {
  margin-right: 2rem;
}

.cart-icon-container img {
  height: 30px;
  width: 30px;
  aspect-ratio: 1;
}

.shopping-cart-overlay {
  position: absolute;
  top: 5rem;
  right: 100px;
  width: 400px;
  border-radius: 10px;
  box-shadow: 0 1rem 10px rgba(0, 0, 0, 0.185);
}

.shopping-cart-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
}

<div class="right-container">
  <div class="account-container">
    <div class="shopping-cart-overlay">
      <div class="shopping-cart-header">
        <h4>Cart</h4>
      </div>
      <div class="shopping-cart-content">
        <p>Your cart is empty</p>
      </div>
    </div>
    <a href="/index.html" class="cart-icon-container">
      <img src="./images/icon-cart.svg" alt="cart">
    </a>
    <img class="avatar" src="./images/image-avatar.png" alt="profile-pic">
  </div>
</div>

【问题讨论】：

来自docs --> "absolute：当z-index的值不是auto时，这个值会创建一个新的堆叠上下文 " - 查看此图并阅读 the accompanying text 以获得解释。

标签： javascript html css

【解决方案1】：

它确实有效。阅读this 以更好地了解z-index 如何与position 协同工作。你只是没有注意到它，因为div 是透明的。

查看下面的 sn-p。这是您的确切代码，但我更改了 background 并将 .shopping-cart-overlay 元素放置在更靠近其他元素的位置，只是为了向您展示它确实有效。

.right-container {
  padding: 1rem;
}

.account-container {
  display: flex;
  align-items: center;
  position: relative;
}

.cart-icon-container {
  margin-right: 2rem;
}

.cart-icon-container img {
  height: 30px;
  width: 30px;
  aspect-ratio: 1;
}

.shopping-cart-overlay {
  position: absolute;
  //top: 5rem;
  //right: 100px;
  width: 400px;
  border-radius: 10px;
  box-shadow: 0 1rem 10px rgba(0, 0, 0, 0.185);
  
  /* Changes */
  top: 0;
  left: 125px;
  z-index: 99;
  background-color: red;
}

.shopping-cart-content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 1rem;
}

<div class="right-container">
    <div class="account-container">
      <div class="shopping-cart-overlay">
        <div class="shopping-cart-header">
          <h4>Cart</h4>
        </div>
        <div class="shopping-cart-content">
          <p>Your cart is empty</p>
        </div>
      </div>
      <a href="/index.html" class="cart-icon-container">
        <img src="./images/icon-cart.svg" alt="cart">
      </a>
      <img class="avatar" src="./images/image-avatar.png" alt="profile-pic">
    </div>
  </div>

【讨论】：

我很高兴你发现我读错了 xD
当然。请将其标记为正确答案。谢谢。