定位：
? ? ? ? - 定位指的就是将指定的元素摆放到页面的任意位置,通过定位可以任意的摆放元素
? ? ? ? - 通过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>