css四种定位

概述：元素定位属性主要包括的模式和边偏移两部分，也就是说以后定位要和边偏移量搭配使用。边偏移加定位定位模式才能构成一个完整的定义方式。

偏移量说明：

边偏移属性   描述
top:        顶端偏移，定义元素相对于其父元素上边线的距离
bottom:     底部偏移，定义元素相对于其父元素下边线的距离
left:       左侧偏移，定义元素相对于其父元素左边线的距离
right:      右侧偏移，定义元素相对于其父元素右边线的距离

定位模式的分类

值       描述
static   自动定位（默认定位方式）
relative 相对定位，相对于其元文档流的位置进行定位
absolute 绝对定位，相对于其上一个已经定位的父元素进行元素定位
fixed    固定定位，相对于浏览器窗口进行对位

一、静态定位

是所有元素的默认定位方式，当position属性的取值为static,可以将元素设置为静态，也就是各个元素在html中默认的位置，其实就是标准流的意思
对边偏移无效，一般用来清除定位

二、相对定位

position:relative
1.相对对位最重要的一点是它可以通过边偏移移动位置，但是原来的所占位置继续占有。
2.其次，每次移动的位置是，自己在左上角为基点移动 （相对自己来移动）

相对对位的盒子仍然在标准流中，它后面的盒子仍然以标准流的方式对待它（相对定位不脱标）

三、绝对定位

position: absolute
绝对定位可以通过边偏移量移动位置，但是完全脱标，完全不占位置

父级没有定位
如果父元素没有定位，孩子以浏览器为基准对齐
绝对定位是根据最近的定位（绝对、相对、或者固定）的父元素（祖先）进行定位

一般会结合相对定位使用 （子绝父相）

加了绝对定位的盒子设置margin 左右auto不会生效
解决水平的方法：先设置盒子left: %50  然后margn-left: 盒子的负一半
left: 50%;
margin-left: -50px;

水平居中也是同样的原理
top:50%;
margin-top: -20px; 另一种完美的写法：transform: translateX(-50%);

四、固定定位

position： fixed;

固定定位也是完全脱标的特性
固定定位的盒子一定要写宽和高，除非有内容撑开的不用写
以浏览器为基点

五、叠放层次z-index

当对多个元素同时设置定位时，定位元素之间有可能发生重叠
可以通过优先级来解决
注意点：
1. z-index的默认值是0，取值越大，定位元素在层叠元素中越居上
2. 如果取值相同，则根据书写顺序，后来者居上
3. 后面数字一定不能加单位
4. 只有相对定位，绝对对位，固定定位由此属性，其余标准流，，浮动，静态无此属性

六、定位的模式转换

当元素添加了相对定位和绝对定位，元素模式也会转换成行内块

(浮动的盒子会转换成行内块，没给宽度的情况下  以内容撑开宽度)
如果盒子本身就需要添加浮动后者绝对固定定位就不需要转换了