position: sticky实现吸顶操作

最新推荐文章于 2024-07-03 16:58:30 发布

原创最新推荐文章于 2024-07-03 16:58:30 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #position #sticky

css 专栏收录该内容

17 篇文章

订阅专栏

本文通过一个实例展示了如何使用HTML和CSS实现特定的网页布局效果，包括固定高度的红色边框块、粘性定位的橙色顶部导航栏及长滚动内容区域。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test</title>
  </style>
</head>
<body>
  <div style="border: 1px solid red; height: 30px;"></div>
  <div style="border: 1px solid orange; height: 50px; position: sticky; top: 0; background: red;">
  </div>
  <div style="border: 1px solid pink; height: 8000px; position: relative; width: 30px;background: blue;">
  </div>
</body>
</html>