第二章：第12节 CSS 定位属性
更新于：2016-12-18 22:23:48
这节楠神带领大家学习CSS最后一个重要的属性，比较有难度的属性——定位属性，广泛用于各种特效，楠神简单带领大家了解下它都有什么作用，这节课需要大家去下载代码学习研究下。
定位属性
position：元素定位属性，取值static、fixed、relative、absolute
l static：静态定位，没有定位，元素默认的定位方式就是static
l fixed：固定定位，跟当前窗口有关。
l relative：相对定位，相对于“自己”来进行定位。
l absolute：绝对定位，相对“祖先”元素来进行定位。
定位坐标
l left：距离元素左边的距离。
l top：距离元素顶边的距离。
l right：距离元素右边的距离
l bottom：距离元素下边的距离。
提示：定位坐标一般情况下不会全部用到，可能会用到其中的一两个。
固定定位：position:fixed
l 固定定位是相当于“当前窗口”来进行的定位。
l 固定定位元素不再占空间，层级要高于普通元素，跟“浮动”很像。
l 固定定位元素，是一个“块元素”，换句话说，行内元素使用fixed定位，将转成“块元素”。
l 如果只指定了fixed定位属性，并没有设置偏移量（定位坐标），则“原地不动”。
相对定位：position: relative
l 相对定位，是相对于“原来的自己”进行的定位。
l 相对定位元素，所占的空间还存在，但层级要高于普通元素。
l 四个定位坐标，如何向“中心”靠近的坐标都为“正值”，往“中心”相反方向的坐标都为“负值”。
l 如果只指定relative定位，并没有设置偏移量，则元素的位置不会改变(原地不动)。
绝对定位position: absolute
l 绝对定位元素，相对于“祖先定位元素”进行的定位。
u 如果父元素没有定位属性的话，则再往上找父定位元素，如果一直找到<body>元素，都没有找定位元素的话，则最终就相对于body来定位。
u 如果父元素是定位元素(相对或绝对)的话，那么绝对定位元素，就相对于该父元素进行定位。
l 绝对定位元素，不再占空间，层级要高于普通元素。
l 绝对定位元素，是一个“块元素”。
l 如果只指定absolute定位，并没有设置偏移量，则元素的位置不会改变(原地不动)。
使用绝对定位position:absolute;总有一个父元素要有相对定位属性position:relative;如果是相对于body定位，不如直接使用固定定位属性position:fixed;
固定定位position:fixed;常用于一些广告或内容随滚动条滚动，比如本站右边的广告。
相对定位position:relative;一般配合绝对定位使用。
绝对定位position:absolute用途非常多，楠神会在本节代码中加一个绝对定位使用案例。
每个产品的“限时抢”图标就是靠绝对定位实现的。
注意：一个元素只加一种定位属性。