CSS入门篇13.固定定位与粘滞定位

最新推荐文章于 2023-03-29 15:44:05 发布

大白菜·

最新推荐文章于 2023-03-29 15:44:05 发布

阅读量161

点赞数 2

文章标签： css 前端 html javascript java

本文链接：https://blog.csdn.net/m0_62404129/article/details/126543788

版权

固定定位

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

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

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

　（3）固定定位不占有原来的位置，即脱离标准流，更改元素的性质

(4)应用场景

- 固定导航

- 固定侧边栏

- 广告

代码演示为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>

    <style type="text/css">
    body{
      height: 3000px;
    }
      .outer {
        width: 400px;
        height: 500px;
        border: 5px solid red;
        margin: 50px auto;
        position: relative;
      }
      .box1 {
        width: 100px;
        height: 100px;
        background-color: orange;
        /* 开启固定定位 */
        position: fixed;
        right: 0;
        bottom: 30%;
       
      }
    </style>
  </head>
 <body >
      <div class="outer">
         <div class="box1"></div>
         <p>
           司老所什，也先程不，小量场，五举陀位么当血有之面郭谭畴就尽曾，小人偶太，法者知备人密之便使同不慧洪护惶没九法，生日怒幕这入主的程派事山持，骨磊人不是是学到妙是至，范陛的王尹畴他不令遗事卞，秦意楚没留身娇如入娇情判韩，升玉问罪人只绝到落路绪啦友看可，下不中贤愚厅方轻金洋关导订，愚书畴洪交仇通设贤，道资变原不逃出一，攻不了的到了和斯在最的，好要卧张希因妙了大已智德，他褒人言仑下李了会艳帮在春，定的张但才永好会姑十大，可对韩在婵派也得逃平，回死揽疾程么考责乐瞠高，方谭学人磊杨，卧决韩应，是么未是，作尹老了前啊终身在见谓土说德县第他，在诗攻作罚愚，败他极其上才使，心在落她创变后制量互后元，天或程非气。
         </p>
      </div>

 </body>
</html>

box1并不会随着屏幕的滚动而滚动

效果图为：

粘滞定位

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

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

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

（2）占有原来位置（体现相对定位特点）,不会脱离文档流，元素性质也不会发生变化；

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

(4)配合top值设置，没有达到top值之前正常显示，随着滚动条滚动而滚动，

达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动

演示代码为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>导航条</title>
    <style>
      *{
        padding: 0;
        margin: 0;
        text-decoration: none;
        list-style: none;
      }
      ul{

        width: 800px;
        height: 50px;
        background-color: pink;
        margin: 100px auto 0px;
        line-height: 50px;
        text-align: center;
        /* 设置粘滞定位 */
        position: sticky;
       top: 0;
     
      }
      ul>li{
        float: left;
        width:25% ;
      }
      ul>li:hover{
        background-color: #ccc;
        color: white;
      }
    </style>
  </head>
  <body style="height: 3000px;">
    <div>
    <!-- 创建导航条的结构 -->
      <ul>
        <li>导航</li>
        <li>导航</li>
        <li>导航</li>
        <li>导航</li>
      </ul>
      <!-- 内容 -->
      <div>
        币说无釜张陀娟会事先关看用有找目，肯王老，重主应时有娟文起，虑诗与洞法是皇然罪，畴却地明妄只因拢是后人上，间君是锐皇中人什笔言，将尽文之，毒人所燕目不定生皇，可有何应皇的于六子来安，则磊认，骨竟一老出是太个骂勇人送惶首，釜回不，份人貂，盲一就兼虑身，仇自洪们哉，廿县事五云语身就杨永不由沾的掉次又派，王才命降法中回马快是尝才在到不略觉区，见仆得他请易，五用哉说人投不得卞居放，牙所杨慧视力程入承希设案用的乏我二韩，不无分远洪王不高郭，对十范非应才太子有收轻他已为使到吾、流，吴才也，有是奔，的可今谭药备起重过可一掉珍，都的牙天重她三为，五娇中死肯纯力，杀洪命遗关向绪揽安俭原秦也量实你，回落若，那心。
        常死为文评与收葬说不以帝，谓言上老畴，促人的家说文出藏，弄就回珍国徨吴，大之兴张其快，可韩我娟承外此主得把善情吾一恼李韩才判，子太杀洪清同雷选得谓叩，别弟身饮故始韩你仇君，即罪因得陀且领王，方主善疾交，变生的落，的韩之气家上的了自秦者君未派乡，沫里当行谋，投时尤韩褒受，评大是，虽之掸在九好易与，设。
      </div>
    </div>
  </body>
</html>

演示效果为：

大白菜·

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS入门篇13.固定定位与粘滞定位

（2）占有原来位置（体现相对定位特点）,不会脱离文档流，元素性质也不会发生变化；(4)配合top值设置，没有达到top值之前正常显示，随着滚动条滚动而滚动，-当元素的position属性设置为sticky时，则开启了元素的粘滞定位。当元素的position属性设置fixed时，则开启了元素的固定定位。（3）固定定位不占有原来的位置，即脱离标准流，更改元素的性质。（1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；（1）以浏览器为参照物（体现固定定位特点）；粘滞定位（一般用于页面导航的吸顶效果)..
复制链接

扫一扫