CSS中的position定位

CSS中的定位可以帮助我们对页面进行美化，CSS中的定位主要分为静态定位，相对定位，绝对定位，固定定位这四种。一般情况下，定位还会跟随不同的参数，例如top,bottom,left,right,z-index等。下面，我们就详细了解一下这些定位。

1. 静态定位

position: static
一帮的标签元素不加任何定位属性都属于静态定位，在页面的最底层，属于标准流。

2. 相对定位

position: relative
相对定位是相对于自身位置的偏移，是以自身的位置作为参考的，相对定位的元素不会使元素脱离文档流
相对定位具有以下特点：
(1) 不会脱离文档流
(2) 如果不加定位偏移量，对元素没有任何影响
(3) 不影响元素本身的特性

例如以下代码：

<div class="one"></div>
<div class="two"></div>

对应的css为

<style>
    .one{
      width: 100px;
      height: 100px;
      background-color: #000;
      position: relative;
      left: 200px;
    }
    .two{
      width: 100px;
      height: 100px;
      background-color: #ff4400;
    }
  </style>

如上结果所示，为黑色的设置了向右偏移100像素之后，会在原来位置留下空白，并不会改变其他元素的布局。

3. 固定定位

position: fixed
固定定位是相对于浏览器窗口进行定位，并且不会随着滚动条而滚动，固定定位最常见的用法是在页面中创建一个固定头部、或者固定侧边栏。**固定定位会完全脱离文档流**。相对于html进行定位。

4. 绝对定位
position: absolute
绝对定位是相对于其最近的非静态定位的父元素的定位，即如果父元素设置了定位，且定位为非静态定位，则该元素的偏移量则是相对于父元素的定位，如果父元素没有定位，则会继续往上找父元素，直到找到有定位的父元素为止。在此说明一下，如果该元素的所有父元素都没有定位的话，那么它会根据视口进行定位，并不是body，而是html。位置通过left,bottom,top,right来确定绝对定位会脱离文档流
例如：

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

<style>
    .one,
    .two,
    .three{
      width: 50px;
      height: 50px;
    }
    .one{
      background-color: #000;
    }
    .two{
      background-color: red;
      position: absolute;
      left: 50px;
    }
    .three{
      background-color: blue;
    }
  </style>

使用绝对定位之后：

.two{
      background-color: red;
      position: absolute;
      left: 100px;
    }

如图所示，为中间的div设置绝对定位之后，中间的div向右移动了100像素，然后下边的div就会挤到中间div的位置上。