css

关于定位position

　　　　relative 相对定位，相对于其源文档流的位置进行定位                                       不脱离文档流

　　　　absolute 绝对定位，相对于其上一个已经定位的父元素进行定位、  　　　　   脱离文档流    

　　　　fixed 固定定位，相对于浏览器的窗口进行定位　　　　　　　　　　　　        脱离文档流

position:

取值：static 默认，静态（默认文档流定位）

      relative 相对定位

      absolute 绝对定位

      fixed    固定定位

当一个元素被position修饰，并且取值为

relative/absolute/fixed其中一种时，

那么这个元素被称为已定位元素

定位要配合偏移属性使用

当一个元素有position属性，并取值为relative/absolute/fixed

那么这个元素就解锁4个偏移属性，元素距离(方向)有多少px

top: +往下   -往上

right: +往左  -往右

bottom: +往上  -往下

left:+往右 -往左

相对谁定位，相对自己原来位置偏移某个距离

position:relative;配合4个偏移属性使用

特点：1.不脱离文档流

      2.相对定位，如果不写偏移量，效果与没写定位是一样的。不影响任何布局(为了绝对定位做准备)

使用场合：

1.自身元素位置的微调

2.作为绝对定位子元素的已定位祖先级元素

2.绝对定位

position:absolute；配合偏移属性应用

特点：1.绝对定位的元素会相对于，离自己"最近的""已定位的""祖先元素"，去实现位置的初始化

        如果没有已定位的祖先元素，相对于body去实现位置的初始化

      2.绝对定位，是脱离文档流的，不占据页面空间，后面元素会上前补位。

      3.绝对定位的元素，会变成块级元素

3.固定定位

position:fixed；配合偏移量使用

将元素固定在页面上的某个位置，不会随着滚动条发生位置变化，一致固定在可视区域

特点：脱离文档流，位置相对于body初始化

      元素不占页面空间

      后续元素上前补位

      元素变为块级

4.堆叠顺序

1.定位的脱离文档流和浮动的脱离文档流不是一个体系

2.默认，后定位的元素，堆叠顺序高

3.设置堆叠顺序

  z-index:无单位数字 

4.堆叠顺序对父子级无效，儿子永远在父亲的上面

5.只有已定位元素，有堆叠顺序