申请职位:对div的孩子有粘性 [英] Apply position: sticky to child of a div

问题描述

位置:当我将其应用于div的孩子时，粘性似乎对我不起作用.该怎么解决?

Position: sticky doesn't seem to work for me when I apply it to a child of a div. How to solve?

HTML:

Lorem Ipsum
<div class="this-parent-div-is-necessary">
   <div class="div-sticky-class">
     Test
   </div>
</div>
Lorem Ipsum

CSS:

.div-sticky-class{
  color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

示例: https://jsfiddle.net/n8Le2tva/

推荐答案

将所有内容放入this-parent-div-is-necessary容器中.

Put everything inside your this-parent-div-is-necessary container.

.div-sticky-class {
  color: red;
  position: sticky;
  position: -webkit-sticky;
  top: 0;
}

<div class="this-parent-div-is-necessary">
  Lorem Ipsum
  <div class="div-sticky-class">
    Test
  </div>
  Lorem Ipsum
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
</div>

这篇关于申请职位:对div的孩子有粘性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！