CSS定位--position

CSS定位----position

一.定位的意义

定位作为CSS布局的三大机制：标准流、浮动和定位之一，需要完全掌握。

将盒子定在某一个位置 自由的漂浮在其他盒子的上面 —— CSS 离不开定位，特别是 JS特效。

定位模式：
position: static（静态定位，默认）| relative（相对定位）| absolute（绝对定位）| fixed（固定定位）

边偏移：
通过 top、bottom、left 和 right 属性定义元素的边偏移：（方位名词）
如：top: 80px top: 50%

二.定位的作用

个人简单的理解就是，将指定的元素放到盒子中的任意位置。

三.定位分类

1.static 静态定位，也就是没有定位的意思；

2.relative 相对定位，相对元素本身在文档中的位置进行定位，在文档中始终占据原有位置；

3.absolute 绝对定位，相对元素的带有定位的父级元素进行定位，父元素没有定位则以浏览器为准定位，完全不占位置；

4.fixed 固定定位，相对浏览器可视窗口进行定位，完全不占位置。

四.定位扩展

1.绝对定位的使用通常伴随着父元素的相对定位；

2.绝对定位可以实现居中对齐，例如：
positon: absolute; left: 50%; margin-left: -元素宽度/2px；

3.使用z-index属性控制堆叠顺序，属性值为整数，越大越靠上，相同值则按书写顺序，后来居上；

4.定位改变display属性，绝对定位和固定定位也与浮动类似， 默认将显示模式转换为行内块。所以一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等；

5.浮动元素、定位（绝对定位和固定定位）元素都不会触发外边距合并的问题。