帶滾動的Div消失在其他div后面

Question

我有以下HTML / CSS / JS（也在此處總結： https : //codepen.io/anon/pen/JaRrgG ）

HTML：

<div class="blockcart cart-preview">
    <div class="header">
      <a rel="nofollow" href="#">
        <img class="cart-icon" src="https://via.placeholder.com/20x20" onclick="toggleClass()">

      </a>
    </div>
    <div class="body" id="shopping-cart-body">
      <div class="close"><a href="" onclick="toggleClass()">X</a></div>
      <ul>
      </ul>
      <div class="shopping-cart-header">CART</div>
      <div class="products-container">
        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/80x80"></span>
          <div class="product-details">
            <div class="name-header">NAME</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">öffnen</a></span>
            </div>
          </div>
        </div>


        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/80x80"></span>
          <div class="product-details">
            <div class="name-header">NAME</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">öffnen</a></span>
            </div>
          </div>
        </div>

        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/80x80"></span>
          <div class="product-details">
            <div class="name-header">NAME</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">öffnen</a></span>
            </div>
          </div>
        </div>

        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/80x80"></span>
          <div class="product-details">
            <div class="name-header">NAME</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">öffnen</a></span>
            </div>
          </div>
        </div>

        <div class="product">
          <span class="prodcut-image"><img src="https://via.placeholder.com/80x80"></span>
          <div class="product-details">
            <div class="name-header">NAME</div>
            <div class="product-quantity-details">
              <span class="quantity">QTY</span>
              <span class="color-circle"></span>
              <span class="color">COLOR</span>
            </div>
            <div class="price-open">
              <span class="product-price">XX.XX</span>
              <span class="product-link"><a href="#">öffnen</a></span>
            </div>
          </div>
        </div>


        </div>
        <div class="checkout">
          <div class="meta-data-wrap">
            <div class="taxes">
          <span class="label">Taxes</span>
          <span class="value">0</span>
        </div>
        <div class="cart-total">
          <span class="label">Total</span>
          <span class="value">0</span>
        </div>
          </div>
        <button><a href="#">Checkout</a></button>
      </div>
    </div>
</div>

CSS：

.cart-preview {
    float: right;
    position: relative;
}

.cart-preview a,
.cart-preview a:hover,
.cart-preview a:visited {
    text-decoration: none;
    color: inherit;
}

.cart-preview .header {
    display: block;
    font-weight: bold;
    border: 1px solid #808080;
    padding: 5px;
    cursor: pointer;
    background-color: #fff;
}

.cart-preview .body {
    visibility: visible;
    position: fixed;
    height: 100%;
    top: 0;
    width: 400px;
    z-index: 100;
    background-color: #fff;
    transition: right 1s linear;
    right: -410px;
}

.cart-preview .body.open {
    visibility: visible;
    transition: right 1s linear;
    right: 0px;
}

.cart-preview .body .shooping-cart-body {
    font-family: 'sans-serif';
    width: 100%;
    text-align: center;
}

.cart-preview .body .close{
    float: left;
}
.cart-preview .body .shopping-cart-header{
    font-family: 'IBMPlexSans-Bold.woff'
    font-size: 45px;
    margin-top: 40px;
    text-align: center;
}
.cart-preview .body .products-container {
    height: calc(73vh - 20px);
    width: 100%;
    margin-top: 15px;
    overflow: auto;
}

.product {
  position: relative;
    display: flex;
}

.product>div {
    width: 50%;
}

.product .prodcut-image {
  margin-left: 20px;
    margin-right: 20px;
}

.product img {
    width: 100%;
    height: auto;
}

.cart-preview .body .products-container>.product-image {
    position: absolute;
    width: 50%;
    left: 0;
}

.cart-preview .body .products-container>.product-details {
    position: relative;
    width: 50%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content:space-between;
}

.name-header{
  position: absolute;
  top: 0;
}
.cart-preview .body .products-container .color-circle:before {
  color: blue;
    content: ' \25CF';
    font-size: 30px;
}

.cart-preview .body .checkout {
    position: absolute;
    bottom: 0;
    height: 20vh;
    width: 100%;
    background: gray;
}

.cart-preview .product{
  margin-top: 10px;
}
.product-quantity-details{
  position: absolute;
  align-items: center;
  display: inline-flex;
  top: 25%;
}


.product-quantity-details .quantity{
    border: 2px solid black;
    margin-right: 10px;
    background: white;
    width: 36px;
    height: 36px;
    font-size: 15px;
    line-height: 35px;
    color: black;
}

.name-header{
  position: absolute;
  text-align: left;
  top: 0;
}

.price-open{
  position: absolute;
  bottom: 0;
}

.product-quantity-details .quantity:after{
    content: 'x'
}

.cart-preview .body .checkout>button {
    position: absolute;
    background: black;
    text-align: center;
    vertical-align: middle;
    color: white;
    line-height: 14px;
    bottom: 30px;
    height: 20px;
    width: 205px;
    left: 25%;
}

.meta-data-wrap{
    display: flex;
    flex-direction: column;
    width: 100%;
}


.cart-total .value {
    float: right;
}
.cart-total .value:after {
    content:'€'
}

.cart-total .label {
    float: left;
}

.taxes{
  margin-left: 20px;
  margin-right: 20px;
}

.cart-total{
    margin-left: 20px;
  margin-right: 20px;
}

.taxes .value {
    float: right;
}

.taxes .label {
    float: left;
}

.taxes .value:after{
  content: '€';
}

.cart-preview.cart-overview {
    width: 100%;
    position: inherit;
}
.cart-preview.cart-overview .body {
    display: block;
    position: inherit;
    width: 100%;
}
.cart-preview .header > :first-child {
    float: left;
}
.cart-preview .header > :last-child {
    float: right;
}
.cart-preview .header::after,
.cart-preview .cart-totals > div::after {
    clear: both;
    content: "\A0";
}
.cart-preview .body {
    border: 1px solid #808080;
    padding: 2px;
}

JS：

function toggleClass() {
  document.getElementById('shopping-cart-body').classList.toggle('open');
} 

在div .checkout .products-container內滾動可正常工作，但在div .checkout后面的下部產品則.checkout 。 （您可以在代碼筆中看到此內容，價格和鏈接都丟失了）。 由於父div .body.open是固定位置的，因此我嘗試為.body.open .product-container提供position relative和80％的高度來解決此問題，但這沒有用。 我不希望給出更高的z-index。
有人可以幫我嗎？

Answer 1

我認為您不需要.checkout類的絕對位置

.cart-preview .body .checkout {
 position: relative;
 bottom: 0;
 height: 20vh;
 width: 100%;
 background: gray; 
}

.cart-preview .body .products-container {
 height: 67vh;
 width: 100%;
 margin-top: 15px;
 overflow: auto;
}