Home
HTML
HTML
Tryit: HTML
运行 ❯
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <style> div.sticky { position: -webkit-sticky; position: sticky; top: 0; padding: 5px; background-color: #cae8ca; border: 2px solid #4CAF50; } </style> </head> <body> <p>尝试在此框架内<b>滚动</b>以了解粘性定位的工作原理。</p> <p>注意：IE/Edge 15 及更早版本不支持置顶。</p> <div class="sticky">I am sticky!</div> <div style="padding-bottom:2000px"> <p>在此示例中，当您到达其滚动位置时，粘性元素会粘在页面顶部 (top: 0)。</p> <p>向上滚动以去除粘性。</p> <p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>一些启用滚动的文本.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </div> </body> </html>