粘滞定位

<!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" />
    <title>Document</title>
  </head>
  <style>
    body {
      height: 1800px;
    }
    ul {
      margin-top: 150px;
      width: 1200pxpx;
      height: 48px;
      background-color: #777777;
      list-style: none;
      position: sticky;
      top: 0px;
    }
    li {
      float: left;
      /* margin-right: 50px; */
      line-height: 48px;
    }
    ul a {
      /* 将a标签转换成块元素 */
      display: block;
      /* 去掉下换线 */
      text-decoration: none;
      /* 设置字体颜色 */
      color: #000000;
      /* 设置字体大小 */
      font-size: 18px;
      /* 设置每个词之间的间距 */
      padding: 0 39px;
    }
    ul a:hover {
      background-color: aqua;
    }
  </style>
  <body>
    <ul>
      <li><a href="#">张飞</a></li>
      <li><a href="#">关羽</a></li>
      <li><a href="#">刘备</a></li>
      <li><a href="#">马超</a></li>
      <li><a href="#">赵云</a></li>
      <li><a href="#">黄忠</a></li>
    </ul>
  </body>
</html>

粘滞定位的特点和相对定位的特点类似，不同的是粘滞定位在元素到达某一个位置时就将其固定。

posted @ 2022-03-25 16:41 罗砂阅读(47) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 导航条练习

· . location常见方法

· position定位属性比较

· position定位

· 定位 position

公告

昵称：罗砂
园龄： 2年11个月
粉丝： 8
关注： 10

+加关注

2025年3月

日

一

二

三

四

五

六

0722tian

粘滞定位

公告

搜索

常用链接

随笔分类

随笔档案

阅读排行榜

推荐排行榜