css粘性定位

最新推荐文章于 2025-10-21 21:02:13 发布

原创最新推荐文章于 2025-10-21 21:02:13 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一个使用CSS实现的粘性定位实例，展示了如何使元素在滚动到特定位置时固定在屏幕上，直至页面再次滚动到该元素下方。注意，IE/Edge15及更早版本的IE浏览器不支持此特性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>粘性定位</title> 
<style>
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}
</style>
</head>
<body>

<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>

<div class="sticky">我是粘性定位!</div>

<div style="padding-bottom:2000px">
  <p>向下滚动</p>
</div>

</body>
</html>