时间戳

首页 > 解决方案 > 列表标题的固定位置，在容器内

html - 列表标题的固定位置，在容器内

问题描述

我试图让可滚动列表的标题（h2）与该窗口保持固定，并且仅与该窗口相关。当我尝试position:fixed时，标题相对于可滚动窗口是固定的，而且对于整个页面也是固定的。如何使固定定位仅适用于可滚动列表窗口？

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>

标签： htmlcsspositioncss-position

解决方案

position: absolute;是选择。它与拥有的下一个更高的祖先有关position: relative。使用top// bottom/参数来定位它和/或left/ （也以百分比值）来定义它的大小，如果它应该大于它的内容。rightwidthheight

请记住，带有position: absolute;(same as fixed) 的元素不占用自己的任何空间，因此它们可以与其他元素重叠。为避免这种情况，您可以例如使用padding父元素或margin后续元素的设置来在绝对定位的子元素后面创建空白空间。

推荐阅读