No.002 相对定位&绝对定位&固定定位

（以下所有内容仅用以记录学习过程中的个人理解，如有错误欢迎指出）

1. 静态定位static

CSS的定位主要有四种：

1. 静态定位；
2. 相对定位；
3. 绝对定位；
4. 固定定位。

定位可用属性有：

1. top；
2. bottom；
3. left；
4. right；
5. z-index。

其中静态定位是默认的定位方式，不能使用以上定位属性，而后三种定位方式可以使用。

2. 相对定位relative

代码如下设置，开启相对定位：

position: relative;

相对定位是以原来的位置为参照，通过设置top、bottom、left、right等属性，确定元素在文档流中的移动方向和距离。

未设置偏移量之前，元素位置不会发生变化。

同时，相对定位会使元素上升一个层级，且并不会改变元素的块/内联性质。

#div1{
    width:200px;
    height:200px;
    border:3px red solid;
    
    position:relative;
    left:100px;
    top:100px;
}

<div id='div1'></div>

代码如上，效果如下图，方框从蓝色原位置相对定位到红色现位置：

3. 绝对定位absolute

代码如下设置，开启绝对定位：

position: absolute;

绝对定位是以与它最近的开启定位的祖先元素为参照，通过设置top、bottom、left、right等属性，确定脱离了文档流的元素的移动方向和距离。

未设置偏移量之前，元素位置不会发生变化。

同时，绝对定位会使元素上升一个层级，但会改变元素的块/内联性质。

#div2{
    width:200px;
    height:200px;
    border:3px red solid;
    
    position:absolute;
    left:100px;
    top:100px;
}

<div id='div2'></div>

代码如上，效果如下图，方框相对蓝色坐标轴绝对定位到红色现位置：

4. 固定定位fixed

代码如下设置，开启固定定位：

position: fixed;

固定定位是以浏览窗口本身为参照，特点基本与绝对定位相同。

固定定位，不会随滚动条滚动。

想想网页经常跳出来的一些不会滚动的小广告，那就是固定定位了。