sticky.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Teste position</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a  href="index.html">static</a></li>
                <li><a  href="absolute.html">absolute</a></li>
                <li><a  href="relative.html">relative</a></li>
                <li><a  href="fixed.html">fixed</a></li>
                <li><a  href="sticky.html">sticky</a></li>
            </ul>
        </nav>
    </header>
    <h1>Posistion sticky</h1>
    <p>O elemento se comporta como static até o Scroll chegar nele, após isso ele se comporta como fixed.</p>

    <div class="container__sticky">
     
    <img src="2.png" alt="" class="imagem__teste">
    <legend>Esse elemento tem position sticky</legend>
    </div> 
</body>
</html>