CSS中更加高级的布局手段——定位之固定定位及粘滞定位

最新推荐文章于 2023-05-30 14:31:47 发布

燕穗子博客

最新推荐文章于 2023-05-30 14:31:47 发布

阅读量1.2k

点赞数 4

分类专栏： CSS 文章标签：开发语言 css vscode javascript java

本文链接：https://blog.csdn.net/m0_64346035/article/details/124116762

版权

CSS 专栏收录该内容

49 篇文章 6 订阅

订阅专栏

定位：

- 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素

- 通过position属性来设置元素的定位

-可选值：

static： ['stætik] 默认值，元素没有开启定位

relative： ['relətiv] 开启元素的相对定位

absolute： ['æbsəlju:t] 开启元素的绝对定位

fixed：开启元素的固定定位（也是绝对定位的一种）

sticky： ['stiki] 开启元素的粘滞定位

固定定位：

当元素的position属性设置fixed时，则开启了元素的固定定位

（1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；

　　　　（2）以浏览器为参照物，和父元素没有任何关系；

　　　　（3）固定定位不占有原来的位置，即脱离标准流

(4)应用场景

- 固定导航

- 固定侧边栏

- 广告

粘滞定位（一般用于页面导航的吸顶效果)

-当元素的position属性设置为sticky时，则开启了元素的粘滞定位

（1）以浏览器为参照物（体现固定定位特点）；

（2）占有原来位置（体现相对定位特点）；

　　　　（3）粘滞定位可以在元素到达某个位置时，将其固定

(4)没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动

代码演示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>导航条</title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      body {
        height: 3000px;
        background-color: #ccc;
      }
      ul {
        width: 900px;
        overflow: hidden;
        margin: 50px auto 0;
        position: sticky;
        /* 当top等于0的时候，就粘滞不动了 */
        top: 0px;
      }
      li {
        float: left;
        width: 20%;
        background-color: pink;
        border: 1px solid red;
        height: 30px;
        line-height: 30px;
        text-align: center;
      }
      li:hover {
        background-color: salmon;
        color: white;
      }
    </style>
  </head>
  <body>
    <!-- 创建导航条的结构 -->
    <ul>
      <li>导航</li>
      <li>导航</li>
      <li>导航</li>
      <li>导航</li>
    </ul>
    <div>
      常死为文评与收葬说不以帝，谓言上老畴，促人的家说文出藏，弄就回珍国徨吴，大之兴张其快，可韩我娟承外此主得把善情吾一恼李韩才判，子太杀洪清同雷选得谓叩，别弟身饮故始韩你仇君，即罪因得陀且领王，方主善疾交，变生的落，的韩之气家上的了自秦者君未派乡，沫里当行谋，投时尤韩褒受，评大是，虽之掸在九好易与，设。
    </div>
  </body>
</html>

燕穗子博客

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS中更加高级的布局手段——定位之固定定位及粘滞定位

定位： - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素 - 通过position属性来设置元素的定位 -可选值： static： ['stætik] 默认值，元素没有开启定位 relative： ['relətiv] 开启元素的相对定位 absolute： [...
复制链接

扫一扫