如何使用overflow-y在固定位置div上定位粘性标题：滚动

Question

我弹出一个要在固定尺寸div上滚动的信息。弹出窗口也需要位置：固定，因为它可能出现在网站的任何位置：

HTML：

<div class="info-box">
  <div class="info-box-header">
  <a data-val="perfil" class="box-control">
    <img class="close-btn" ... />
  </a>

<h3>PERFIL</h3><br><br>
</div>

<div class="info-box-content">
    <p>Lorem ipsum...</p>
</div>

</div>

CSS：

  .info-box{
    background-color: #0f0;
    padding: 1em;
    position: fixed;
    z-index: 9999;
    width: 36em;
    height: 38em;

    overflow-y: scroll;
  }

  .info-box-content{
  }

  .info-box-header{
    position: sticky;
  }

为了能够滚动浏览内容并始终看到关闭按钮和标题，我需要将info-box-header设置为一个粘性标题，所以我尝试了position：sticky，但是，看起来溢出-y ：滚动父.info-box根本不关心。

仅为info-box-content类设置overflow-y属性无效。 的更新 这可能是因为此信息框内容类的高度未设置，但需要具有不同内容的类似框。

你会怎么做？感谢。

Answer 1

为.info-box-content添加了尺寸和溢出。高度需要调整。为演示目的设置为较小的值。

＆＃13;

＆＃13;

.info-box{
    background-color: #0f0;
    padding: 1em;
    position: fixed;
    z-index: 9999;
    width: 22em;
    height: 38em;  
}

.info-box-content{
  width: 20em;
  height: 10em;
  overflow-y: scroll;
}

.info-box-header{
    position: sticky;
}

＆＃13;

<div class="info-box">
  <div class="info-box-header">
  <a data-val="perfil" class="box-control">
    <img class="close-btn" ... />
  </a>

<h3>PERFIL</h3><br><br>
</div>

<div class="info-box-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</div>

＆＃13;

＆＃13;

＆＃13;