固定定位
当元素的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>
演示效果为: