创建一个列表,每个分区都有浮动标题。
使用 overflow-y: auto允许列表容器垂直溢出。在内部容器( <dl>)上使用display: grid创建一个两列的布局。将标题( <dt>)设置为grid-column: 1,将内容(<dd>)设置为grid-column: 2。最后,对标题应用 position: sticky和top: 0.5rem以创建浮动效果。
<div class="container">
<div class="floating-stack">
<dl>
<dt>A</dt>
<dd>阿尔及利亚</dd>
<dd>安哥拉</dd>
<dt>B</dt>
<dd>贝宁</dd>
<dd>博茨瓦纳</dd>
<dd>布基纳法索</dd>
<dd>布隆迪</dd>
<dt>C</dt>
<dd>佛得角</dd>
<dd>喀麦隆</dd>
<dd>中非共和国</dd>
<dd>乍得</dd>
<dd>科摩罗</dd>
<dd>刚果民主共和国</dd>
<dd>刚果共和国</dd>
<dd>科特迪瓦</dd>
<dt>D</dt>
<dd>吉布提</dd>
<dt>E</dt>
<dd>埃及</dd>
<dd>赤道几内亚</dd>
<dd>厄立特里亚</dd>
<dd>斯威士兰(现称 Eswatini)</dd>
<dd>埃塞俄比亚</dd>
</dl>
</div>
</div>
.container {
display: grid;
place-items: center;
min-height: 400px;
}
.floating-stack {
background: #455A64;
color: #fff;
height: 80vh;
width: 320px;
border-radius: 1rem;
overflow-y: auto;
}
.floating-stack > dl {
margin: 0 0 1rem;
display: grid;
grid-template-columns: 2.5rem 1fr;
align-items: center;
}
.floating-stack dt {
position: sticky;
top: 0.5rem;
left: 0.5rem;
font-weight: bold;
background: #263238;
color: #cfd8dc;
height: 2rem;
width: 2rem;
border-radius: 50%;
padding: 0.25rem 1rem;
grid-column: 1;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.floating-stack dd {
grid-column: 2;
margin: 0;
padding: 0.75rem;
}
.floating-stack > dl:first-of-type > dd:first-of-type {
margin-top: 0.25rem;
}
这个技巧创建了一个带有浮动分区标题的列表。当滚动列表时,每个分区的标题会浮动在内容的顶部,提供清晰的视觉结构。
