列表标题在容器中的固定位置

Question

我正在尝试使可滚动列表的标题 (h2) 相对于 window 和 window 保持固定。当我尝试 position:fixed 时，标题相对于可滚动的 window 是固定的，但对于整个页面也是如此。如何让固定定位仅应用于可滚动列表 window?

HTML代码

.sub-headlines {
  position: relative;
  height: 400px;
  margin-top: 2%;
  width: 55%;
  overflow: auto;
  border: 1px solid red;
}

.sub-headlines h2 {
  width: 100%;
  font-size: 80%;
  text-align: center;
  background-color: rgb(238, 253, 247);
  z-index: 0;
}

.sub-headlines-title {
  position: fixed;
}

.sub-headlines ul {
  overflow: auto;
  list-style: disc;
  text-align: center;
  line-height: 2;
  z-index: -100;
}

<div div class="sub-headlines">
  <h2>Recent Headlines in Aging Science</h2>
  <div class="sub-headlines-list">  
  <ul>
    <li>a</li>
    <li>b</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
  </ul> 
 </div>
</div>

Answer 1

position: absolute; 是为此的选择。它与具有 position: relative 的下一个更高的祖先相关。使用 top/bottom/left/right 参数定位 and/or width/height（也是百分比值) 来定义它的大小，如果它应该大于它的内容。

请记住，带有 position: absolute; 的元素（与 fixed 相同）不会占据它们自己的任何 space，因此它们可以与其他元素重叠。为避免这种情况，您可以为父元素使用 padding 设置或为后续元素使用 margin 以在绝对定位的子元素后面创建空 space。

列表标题在容器中的固定位置

fixed position of a list title, within a container

html

css

position

css-position