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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。