css定位

css定位

1、定位 ： 将元素固定到指定的位置上，包括定位模式和边偏移

定位模式：相对定位（自恋型）、绝对定位（拼爹型）、固定定位（认死理）

边偏移：顶、左、右、底（top,left,right,bottom）

 

（1）相对定位: 相对于元素本身位置  position:  relative; top: 30px； left:100px;

1. 定义：相对于元素本身的位置
2. 特点：不脱离标准流（占位置），可脱离父元素

 （2）绝对定位：position:  absolute; top: 30px； left:100px;

　　1、如果父元素没有定位，就是相对于视口 viewport

　　2、如果父元素有相对定位，就是相对于父元素定位，可脱离父元素的范围

　　　特征： 脱离标准流，不占位置固定定位

（3）固定定位：相对于浏览器窗口  position: fiexd

　　　特征： 脱标、不占位

　　添加定位后的元素自动转化为行内块状元素

（4）叠放次序：z-index：数字

　　1、z-index 默认属性值是0，取值如越大，定位元素在层叠元素中越居上

　　2、如果取值相同，则根据书写顺序，后来居上

　　3、z-index 后数字不能加单位

　　4、只有相对定位、绝对定位、固定定位有此属性，标准流、浮动、静态定位都无此属性，故不可指定该属性。

（5）静态定位：  position: static

　　1、就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。

　　2、在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

2、区别

 

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态static	不脱标，正常模式	不可以	正常模式
相对定位relative	不脱标，占有位置	可以	相对自身位置移动（自恋型）
绝对定位absolute	完全脱标，不占有位置	可以	相对于定位父级移动位置（拼爹型）
固定定位fixed	完全脱标，不占有位置	可以	相对于浏览器移动位置（认死理型）