如何解决列表标题在容器内的固定位置
我正在尝试获取可滚动列表的标题 (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>
解决方法
position: absolute;
是选择。它与具有 position: relative
的下一个更高祖先相关。使用 top
/bottom
/left
/right
参数来定位它和/或使用 width
/height
(也是百分比值)来定位它如果它应该大于其内容,则定义其大小。
请记住,带有 position: absolute;
(与 fixed
相同)的元素不占用自己的任何空间,因此它们可以与其他元素重叠。为避免这种情况,您可以例如为父元素使用 padding
设置或为后续元素使用 margin
以在绝对定位的子元素后面创建空白空间。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。