CSS之定位
在学习CSS定位知识之前，我们先来了解一个重要的概念，有助于理解定位元素的使用。
1、文档流的概念
文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行一行，并在每行中按从左到右的顺序排放元素。
2、脱离文档流
脱离文档流指的是元素打乱了这个排列，或是从排版中拿走。
使元素脱离文档流的两种方法：浮动和定位。
3、定位详解
3.1 position：static(默认定位)
使用该属性时，该属性为默认值
此时top、left、bottom、right以及z-index这些属性都是无效的，相当于没有。
<style>
.demo{
width: 200px;
height: 200px;
background: rgb(142, 164, 238);
}
.box1{
width: 50px;
height: 50px;
background: red;
}
.box2{
width: 50px;
height: 50px;
background: rgb(8, 202, 96);
}
.box3{
width: 50px;
height: 50px;
background: rgb(43, 5, 211);
}
.box4{
width: 50px;
height: 50px;
background: rgb(185, 20, 116);
}
</style>
<body>
<div class="demo">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
解读：
div是块级元素，每个标签都是各占一行。所以，按着从上自下的文档流顺序依次往下排列。而static作为默认的定位元素，在这里不需要书写。
3.2 position:relative（相对定位）
relative：生成相对定位的元素，通过 top，bottom，left，right 的位置相对于其正常位置进行定位；其中的相对定位（相对）指的是相对于元素在默认流中的位置。
3.2.1未添加定位元素示例（默认流状态）
#demo{
width: 200px;
height: 200px;
background: rgb(95, 165, 231);
}
#box1{
width: 100px;
height: 100px;
background:red;
}
<div id="demo">
<div id="box1"></div>
</div>
解读：box1在默认流的情况下的位置（效果图）
3.2.2添加定位元素后
#demo{
width: 200px;
height: 200px;
background: rgb(95, 165, 231);
}
#box1{
width: 100px;
height: 100px;
background:red;
position: relative;/**以下代码为定位元素代码**/
top: 50px;
left: 100px;
}
<div id="demo">
<div id="box1">我是box1</div>
</div>
解读：
使用position：relative元素后，box1脱离了文档流，使得box1根据默认文档流位置进行上、左的位置变换。
3.3 position：absolute(绝对定位)
absolute：相对的是向上（除static默认元素外）的定位父级元素，如果没有则是相对于文档进行定位。（一般会以relative作为定位参照）
样式
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 200px;
height: 200px;
background-color: aqua;
}
#box2 {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 300px;
background-color: red;
}
</style>
结构
<body>
<div id="box1">盒子1
<div id="box2">盒子2</div>
</div>
</body>
解读:
此时，box2有定位元素absolute，背后的操作是box2会往上找，直到找到除static默认以外的定位元素，但是上面box1并没有定位元素，所以box1最终会以文档（document）来定位，距离文档顶部0px，左边200px。
<style>
* {
margin: 0;
padding: 0;
}
#box1 {
width: 200px;
height: 200px;
position: relative;
background-color: aqua;
}
#box2 {
width: 100px;
height: 100px;
position: absolute;
top: 50px;
left: 100px;
background-color: red;
}
</style>
解读：结构与上面一样，此时box2中有absolute定位元素，box1中有relative定位元素，而box2作为box1的父级。所以，box2此时是相对于box1来定位的。
3.4 position:fixed(固定定位)
fixed:固定定位，当屏幕滚动使用了固定定位的元素，将不会随屏幕滚动。
样式
<style>
.box1{
width: 100px;
height: 100px;
position: fixed;
top: 100px;
background-color: red;
}
.box2{
width: 100px;
height: 900px;
/* 脱离文档流 往左浮动 */
float: left;
background-color: #00FF00;
}
</style>
结构
<body>
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
</body>
解读：
因为盒子2的高度高，所以当用户滚动屏幕时，盒子2会随着屏幕滚动而走，但是盒子1使用了fixed定位，始终固定在当前位置。
3.5 position:sticky（粘性定位）
sticky：粘性，当屏幕上划时，使用了粘性定位的元素，可以在页面最顶端固定住，常用了导航栏。
样式
<style>
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
结构
<body>
<p>尝试滚动页面。</p>
<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
<div class="sticky">我是粘性定位!</div>
<div style="padding-bottom:2000px">
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
<p>滚动我</p>
<p>来回滚动我</p>
</div>
未滚动前效果
滚动后效果
4、寄语
定位是html和css阶段非常重要的知识点，只有自己掌握了这些知识点，才能在页面编写上，完美的将每一个板块写好。这样会使得你的页面布局非常的美观。