Sticky Positioning.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sticky positioning</title>

    <style>
      body {
        width: 500px;
        height: 1400px;
        margin: 0 auto;
      }

      dt {
          background-color: black;
          color: white;
          padding: 10px;
          position: sticky;
          top: 0;
          left: 0;
          margin: 1em 0;
      }
    </style>
  </head>
  <body>
    <h1>Sticky positioning</h1>

   <dl>
       <dt>A</dt>
       <dd>Apple</dd>
       <dd>Ant</dd>
       <dd>Altimeter</dd>
       <dd>Airplane</dd>
       <dt>B</dt>
       <dd>Bird</dd>
       <dd>Buzzard</dd>
       <dd>Bee</dd>
       <dd>Banana</dd>
       <dd>Beanstalk</dd>
       <dt>C</dt>
       <dd>Calculator</dd>
       <dd>Cane</dd>
       <dd>Camera</dd>
       <dd>Camel</dd>
       <dt>D</dt>
       <dd>Duck</dd>
       <dd>Dime</dd>
       <dd>Dipstick</dd>
       <dd>Drone</dd>
       <dt>E</dt>
       <dd>Egg</dd>
       <dd>Elephant</dd>
       <dd>Egret</dd>
   </dl>

    
  </body>
</html>