元素的定位属性

元素的定位属性
元素的定位属性主要包括定位模式和边偏移两部分。
1、边偏移
top:项端偏移，定义元素相对其父元素上边线的距离
bottom:底部偏移，定义元素相对其父元素下边线的距离
left:左侧偏移，定义元素相对其父元素左边线的距离
right:右侧偏移，定义元素相对其父元素右边线的距离

2、定位模式（定位的分类）
在CSS中，position属性用于定义元素的定位模式，其基本语法格式如下：
static:静态定位（默认）
relative:相对定位，相对其原文档流的位置进行定位
absolute:绝对定位，相对于其上一个已经定位的父元素进行定位
fixed:固定定位，相对于浏览器窗口定位。

静态定位（static）
静态定位是所有元素的默认定位方式，当position属性的取值为static 时，可以将元素位于静态位置。所谓的静态位置就是各个元素在HTML文档流中默认的位置，是文档流的特性。在静态定位状态下，无法通过边偏移属性（top|bottom|left|right）来改变元素的位置。

相对定位(relative)
1、相对定位最重要的一点是，它可以通过边偏移位置，但是原来的所占的位置，继续占有。
2、其次，每次移动的位置，是以自己的左上角为基点移动。
相对定位的盒子仍在文档流中，后面的盒子仍以标准备流方式对待它。
如果说浮动的主要目的是让多个块级元素一行显示，那么定位元素的主要价值就是移动位置，让盒子到想要的位置去。

绝对定位（absolute）
如果文档可滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正常流的某一部分定位。

定位模式的转换
元素添加了绝对定位和固定位之后，元素模式也会发生转换，都转换为行内块模式。因此，行内元素如果添加了绝对定位或者固定定位后，可以不用转换模式，直接给高和宽即可。

当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
注意：绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不点位置。

父级没有定位
若所有父元素都没有定位，以浏览器为准对齐（document文档）

父级有定位
绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素(祖先)进行定位。

子绝父相
1、相对定位 占有位置 有脱标
2、绝对定位 不占有位置 脱标