有关于定位详细总结

定位

1、position

（1）static:静态定位（默认值）；

（2）relative：相对定位；

（3）absolute：绝对定位；

（4）fixed：固定定位；

2、相对定位

（1）相对于元素本身原来位置进行定位；

（2）不定义偏移量对元素本身基本没有影响；

（3）提升元素层级；

（4）通常配合绝对定位使用（作为定位父级）；

（5）不脱离文档流（原来位置仍然占位）；

3、绝对定位

（1）脱离文档流；

（2）提升元素层级；

（3）通常配合相对定位使用（作为定位子元素）；

（4）没有定位父级时，相对于根元素进行定位；

（5）有定位父级时，相对于【最近】的定位父级元素进行定位；

4、固定定位

（1）始终相对于窗口进行定位；

（2）脱离文档流；

（3）提升元素层级；

5、定位特性总结

（1）绝对、固定定位

脱离文档流；

提升层级；

会使未定宽度的块元素适应内容；

会使行内块元素生成一个块级框；

包含浮动子元素，高度不会塌陷；

子元素的margin值不会出现传递塌陷问题；

（2）相对定位

不定偏移量时基本对元素没有影响（不会改变原有的特性但是提升了层级）；

（3）覆盖父系关系

普通元素结构上靠后的覆盖前的，子元素覆盖父元素；

浮动元素覆盖普通元素（浮动元素之间）；

定位元素覆盖普通元素、浮动元素（定位之间同上）；

定位元素之间层级关系可以通过z-index调整；

（4）z-index

z轴的堆叠顺序（控制定位元素之间的层级关系）；

默认：0；

取值：不带单位的数值，值越大显示越靠上；

注：从父原则；

6、浮动和定位在脱离文档流的区别

（1）都是脱离文档流

（2）浮动元素不脱离文本流（文字、图片，其它内联元素产生绕排），定位元素即脱离文档流也脱离文本流；

（3）浮动和定位元素都会使行内元素生成块级框；

（4）都会使未定宽度的块元素适应内容；