如何在滚动时修复相对于父 div 的 div

Question

我试图将一个 div 定位到父 div 的右下角。如图所示。

父 div 充满了文本，所以我在父级上使用了 overflow-y 属性。

但是当我试图滚动父 div 时，子容器开始随之滚动。我希望底部容器保持在右下角，即使在滚动时也是如此。

附上codesandbox链接：https://codesandbox.io/s/relaxed-night-g96xce?file=/index.html

代码：

.text {
  color: white;
  font-size: 15px;
  text-align: right;
}

.usage_body {
  border: 1px solid #000;
  width: 300px;
  height: 300px;
  padding: 10px;
  overflow-y: scroll;
  position: relative;
}

.chart-wrapper__graphLabel {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 300px;
  height: 30px;
  background-color: #00f;
}

<div class="usage_body">
  <div class="chart-wrapper">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas tempora nisi vitae tempore at voluptate similique recusandae? Modi quas qui nesciunt libero, autem, est officia ducimus nobis velit cum asperiores saepe, facilis nam corrupti ad eaque
    laudantium provident nihil magnam. Delectus facere iure distinctio officiis, fuga rem molestiae magnam quam iusto enim. Repellat minima at, nostrum placeat consequuntur iusto quaerat molestias, pariatur aut odio, maiores cumque? Porro a sed nulla
    architecto consequatur maxime praesentium asperiores ea, quasi enim veniam exercitationem neque necessitatibus, libero nemo modi, aspernatur ex sapiente quod. Nihil similique cum nobis quibusdam unde itaque et accusantium impedit. Veniam, illum! Eum
    dolorum suscipit molestiae nihil officia nostrum deserunt laborum hic perferendis dolores asperiores illo perspiciatis, nemo tenetur harum recusandae explicabo quis ipsum amet ipsam vel fugiat assumenda eaque quia. Fugiat asperiores fugit voluptatum
    aspernatur, animi facilis eos. Quod laudantium sunt eaque recusandae porro debitis consectetur nemo in placeat unde praesentium, obcaecati esse deserunt. Voluptate sit, ullam veniam doloribus optio blanditiis magni vero tempora sapiente! Explicabo
    molestiae vel distinctio inventore, repellendus est mollitia tempora quae. Eius animi quisquam tenetur? Dolores placeat dolore sed nobis laboriosam. Dolore, unde! Recusandae amet natus odio totam cumque magnam unde mollitia pariatur iusto expedita.
    Est?
  </div>
  <div class="chart-wrapper__graphLabel">
    <p class="text">
      position me
    </p>
  </div>
</div>

Answer 1

您可以根据 cmets 使用 position:sticky，但填充也应用于粘性元素，因此您还必须将 padding-bottom 设置为 0 或使用 translate 将其固定到框架的最底部，就像这样。

垫底

.text {
  color: white;
  font-size: 15px;
  text-align: right;
  margin:0;
}

.usage_body {
  border: 1px solid #000;
  width: 300px;
  height: 300px;
  padding: 10px;
  padding-bottom:0;
  overflow-y: scroll;
  position: relative;
}

.chart-wrapper__graphLabel {
  position: sticky;
  bottom: 0;
  right: 0;
  width: 300px;
  height: 30px;
  background-color: #00f;
}

<div class="usage_body">
  <div class="chart-wrapper">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas tempora nisi vitae tempore at voluptate similique recusandae? Modi quas qui nesciunt libero, autem, est officia ducimus nobis velit cum asperiores saepe, facilis nam corrupti ad eaque
    laudantium provident nihil magnam. Delectus facere iure distinctio officiis, fuga rem molestiae magnam quam iusto enim. Repellat minima at, nostrum placeat consequuntur iusto quaerat molestias, pariatur aut odio, maiores cumque? Porro a sed nulla
    architecto consequatur maxime praesentium asperiores ea, quasi enim veniam exercitationem neque necessitatibus, libero nemo modi, aspernatur ex sapiente quod. Nihil similique cum nobis quibusdam unde itaque et accusantium impedit. Veniam, illum! Eum
    dolorum suscipit molestiae nihil officia nostrum deserunt laborum hic perferendis dolores asperiores illo perspiciatis, nemo tenetur harum recusandae explicabo quis ipsum amet ipsam vel fugiat assumenda eaque quia. Fugiat asperiores fugit voluptatum
    aspernatur, animi facilis eos. Quod laudantium sunt eaque recusandae porro debitis consectetur nemo in placeat unde praesentium, obcaecati esse deserunt. Voluptate sit, ullam veniam doloribus optio blanditiis magni vero tempora sapiente! Explicabo
    molestiae vel distinctio inventore, repellendus est mollitia tempora quae. Eius animi quisquam tenetur? Dolores placeat dolore sed nobis laboriosam. Dolore, unde! Recusandae amet natus odio totam cumque magnam unde mollitia pariatur iusto expedita.
    Est?
  </div>
  <div class="chart-wrapper__graphLabel">
    <p class="text">
      position me
    </p>
  </div>
</div>

翻译使用 css 变量

.text {
  color: white;
  font-size: 15px;
  text-align: right;
  margin:0;
}

.usage_body {
  --padding: 10px;
  border: 1px solid #000;
  width: 300px;
  height: 300px;
  padding: var(--padding);
  overflow-y: scroll;
  position: relative;
}

.chart-wrapper__graphLabel {
  position: sticky;
  bottom: 0;
  right: 0;
  width: 300px;
  height: 30px;
  transform:translateY(var(--padding));
  background-color: #00f;
}

<div class="usage_body">
  <div class="chart-wrapper">
    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas tempora nisi vitae tempore at voluptate similique recusandae? Modi quas qui nesciunt libero, autem, est officia ducimus nobis velit cum asperiores saepe, facilis nam corrupti ad eaque
    laudantium provident nihil magnam. Delectus facere iure distinctio officiis, fuga rem molestiae magnam quam iusto enim. Repellat minima at, nostrum placeat consequuntur iusto quaerat molestias, pariatur aut odio, maiores cumque? Porro a sed nulla
    architecto consequatur maxime praesentium asperiores ea, quasi enim veniam exercitationem neque necessitatibus, libero nemo modi, aspernatur ex sapiente quod. Nihil similique cum nobis quibusdam unde itaque et accusantium impedit. Veniam, illum! Eum
    dolorum suscipit molestiae nihil officia nostrum deserunt laborum hic perferendis dolores asperiores illo perspiciatis, nemo tenetur harum recusandae explicabo quis ipsum amet ipsam vel fugiat assumenda eaque quia. Fugiat asperiores fugit voluptatum
    aspernatur, animi facilis eos. Quod laudantium sunt eaque recusandae porro debitis consectetur nemo in placeat unde praesentium, obcaecati esse deserunt. Voluptate sit, ullam veniam doloribus optio blanditiis magni vero tempora sapiente! Explicabo
    molestiae vel distinctio inventore, repellendus est mollitia tempora quae. Eius animi quisquam tenetur? Dolores placeat dolore sed nobis laboriosam. Dolore, unde! Recusandae amet natus odio totam cumque magnam unde mollitia pariatur iusto expedita.
    Est?
  </div>
  <div class="chart-wrapper__graphLabel">
    <p class="text">
      position me
    </p>
  </div>
</div>