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

2023-12-26 21:29:10

定位：

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

? ? ? ? - 通过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>

文章来源:https://blog.csdn.net/csgojingyu/article/details/135138711
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。