Computer scienceFrontendCSSBasic propertiesPositioning

Position

Theory

Sticky table of contents

Report a typo

Imagine that you took a task at freelance exchange. You need to modify a list of books by famous authors so that each author lingers at the top of the page until all their books are scrolled.

Table with sticky headings

Write HTML and CSS code
<div class="book_container">
<dl>
<dt class="author">John Ronald Reuel Tolkien</dt>
<dd>The Silmarillion</dd>
<dd>The Monsters and the Critics, and Other Essays</dd>
<dd>The Children of Húrin</dd>
<dd>The History of The Hobbit</dd>
<dd>The Story of Kullervo</dd>
</dl>
<dl>
<dt class="author">Dan Simmons</dt>
<dd>Song of Kali</dd>
<dd>The Fall of Hyperion</dd>
<dd>Summer of Night</dd>
<dd>Fires of Eden</dd>
<dd>Hardcase</dd>
</dl>
<dl>
<dt class="author">Franklin Patrick Herbert, Jr.</dt>
<dd>Rat Race</dd>
<dd>Dune</dd>
<dd>By the Book</dd>
</dl>
<dl>
<dt class="author">Ray Douglas Bradbury</dt>
<dd>All on a Summer's Night </dd>
<dd>The Pumpernickel</dd>
<dd>The Circus </dd>
<dd>Autumn Afternoon</dd>
</dl>
<dl>
<dt class="author">Franklin Patrick Herbert, Jr.</dt>
<dd>Rat Race</dd>
<dd>Dune</dd>
<dd>By the Book</dd>
</dl>
Completed 1 of 2
Write a property to make headings sticky when scrolling through the page
The code is valid
___

Create a free account to access the full topic