位置粘滞在当前布局中不起作用-解网

问：

我有一个 react 应用程序，包装器中有 2 个 div。第一个 div 'product-images' 中有一个名为 'product-info' 的子 div，它需要粘在父 div 的顶部，高度跨度约为 80vh - 它应该覆盖视口。我在这个 div 中还有其他子元素，我希望将粘性位置覆盖在上面。一旦第一个 div 滚动并且第二个 div 进来，我希望粘性 div 包含在“产品图像”中，但它不会粘住！想不通为什么。

我需要一个解决方案，让其余的孩子像固定的 div 一样对待粘性，并从流程中忽略它，让产品信息成为覆盖层，直到它到达该容器的末尾。

这是我的 HTML 的设置方式 -

.product-wrapper {
  margin: auto;
  width: 80vw;
}

.product-images {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* max-width: 80vw; */
  /* text-align: center; */
  margin-top: 2rem;
  margin-bottom: 15%;
  /* position relative; */
  /*   overflow: scroll; */
}

.product-img {
  height: 80vh;
  margin: 1rem 0rem;
  text-align: center;
}

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

.product-info {
  width: 70vw;
  height: 80dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 0;
  position: sticky;
  top: 5vh;
}

<div class="product-images">
  <div class="product-info">
    <!--   this is the sticky one     -->
    <div class="product-top_row">
      <div className="product-text">
        <p>Title</p>
        <p>type</p>
        <p>price</p>
      </div>
    </div>
    <div class="product-btm_row">
      <ProductForm />
    </div>
  </div>
  <div key={img.node.src} class="product-img">
    <img src="https://placehold.co/400x600/png" style={{  width:'auto', height: '100%' }} />
  </div>
  <div key={img.node.src} class="product-img">
    <img src="https://placehold.co/400x600/png" style={{  width:'auto', height: '100%' }} />
  </div>
  <div key={img.node.src} class="product-img">
    <img src="https://placehold.co/400x600/png" style={{  width:'auto', height: '100%' }} />
  </div>
  <div key={img.node.src} class="product-img">
    <img src="https://placehold.co/400x600/png" style={{  width:'auto', height: '100%' }} />
  </div>
  <Link href='/shop' class='backbtn'>Back to Products</Link>
</div>
<div class='description'>
  <div class="innertext">
    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
  </div>
</div>

CSS Flexbox 粘性

位置粘滞在当前布局中不起作用

Position sticky wont work in current layout

评论