List with floating or sticky section headings

Ever wanted to create a list with floating or sticky headings for each section? You absolutely can, using some clever CSS tricks.

Floating headings

In order to create a list with floating headings for each section, you can use overflow-y: auto to allow the list container to overflow vertically. Then, use display: grid on the inner container (<dl>) to create a layout with two columns.

Set headings (<dt>) to grid-column: 1 and content (<dd>) to grid-column: 2. Finally, apply position: sticky and top: 0.5rem to headings to create a floating effect.

.floating-stack {
  overflow-y: auto;
}

.floating-stack > dl {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: center;
}

.floating-stack dt {
  position: sticky;
  top: 0.5rem;
  grid-column: 1;
}

.floating-stack dd {
  grid-column: 2;
}

Sticky headings

Similarly, for the sticky headings, you'll need to use overflow-y: auto to allow the list container (<dl>) to overflow vertically. Then, simply set headings (<dt>) to position: sticky and top: 0 to create a sticky effect. You can also style the headings to make them stand out.

.sticky-stack {
  overflow-y: auto;
}

.sticky-stack dt {
  position: sticky;
  top: 0;
}