快速理解CSS中的position定位

在CSS中，有一个非常重要的属性，几乎只要用CSS，就避免不了使用这个属性，它就是定位属性position。它可以使元素非常灵活的处于你想的位置。

position属性的值有absolute、relative、fixed、static以及inherit.其中前三个值是我们开发中比较常用的，static为默认值，也就是没有定位，inherit是规定从父元素继承 position 属性的值，也很少使用，反正我在开发中没有用过static以及inherit这两个值，接下来，我们就重点了解下前三个值。

相对定位relative

生成相对定位的元素，相对于其正常位置进行定位。通过top、left、right以及bottom设置元素位置，例子如下：

div{
    position:relative;
    top:50px;
    left:50px;
}

上面代码的意思就是，向div的顶部位置和左侧位置分别增加50像素，通俗点讲，也就是将div向下向右分别移动50像素。需要注意的是，相对定位是不会脱离文本流的，也就是说他不会在文本中删除。

相对定位最常见的使用方式有如下两种：一、元素相对自身的原位置偏移某个距离。二、使该元素的子元素相对该元素绝对定位。

绝对定位absolute

生成绝对定位的元素，相对于父级元素进行定位。也是通过top、left、right以及bottom设置元素位置，例子如下：

.parent{
    position:relative;
}

.child{
    position:absolute;
    right:20px
}

上面代码意思就是：class名为child的子元素相对class名为parent的父元素的右侧移动20像素。父级元素添加position：relative，相当于告诉子元素：“要以你爹的位置位移”。注意，绝对定位是脱离文本流的，也就是说他会在文本中删除，不占文本位置。

固定定位fixed

固定定位相对于浏览器视窗定位，定位后不随文档滚动而移动。元素定位后生成一个块级框，不论它原来是行内元素还是块级元素。与绝对定位的区别仅仅是包含块不同。与绝对定位一样，固定定位元素也是脱离文本流的。通过top、left、right以及bottom设置元素位置，用法同相对定位与绝对定位。我们在浏览网站时有时会看到两侧出现广告，还有顶部导航栏始终都在页面顶部，这两种效果就是通过固定定位实现的。