position的8种定位方式

position定位的八种方式： 

一、常见/用的四种

1.static

positon定位的默认值，没有定位

2.relative

生成相对定位的元素，相对于其正常位置进行定位，一般在子元素设置absoute定位时，给父元素设置relative

元素的位置通过top、right、bottom、left  控制，其值的定位起点都是是父元素左上角(这点和absoute、fixed不一样)

3.absoute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位

元素的位置通过top、right、bottom、left  控制，top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角

4.fixed  （ie6不兼容）

生成绝对定位的元素，相对于浏览器窗口进行定位，和absoute的区别是fixed不会跟随屏幕滚动(常见的各种贴屏广告)

元素的位置通过top、right、bottom、left  控制，top、left的定位起点是包含块左上角，right、bottom的定位起点是包含块右下角

 

二、不常用的四种 

1.inherit

规定应该从父元素继承 position 属性的值

inherit 关键字可用于任何 HTML 元素上的任何 CSS 属性

兼容：ie7及以下版本不支持此属性

2.initial 

设置positon的值为默认值(static)

兼容：ie不支持此属性

问：有了static为什么还会存在此属性，不是多此一举？

答：initial 关键字可用于任何 HTML 元素上的任何 CSS 属性，不是postion特有的

3.unset

设置positon的值为不设置：

如果该属性的默认属性是 继承属性(例如字体相关的默认属性基本都是继承)，该值等同于 inherit
如果该属性的默认属性 不是继承属性(例如pisition的默认属性为static)，该值等同于 initial

兼容：ie不支持此属性

4.sticky

css3新属性，它的表现就像position:relative和position:fixed的合体:

1.在目标区域在屏幕中可见时，它的行为就像position:relative;

2.页面滚动时

 当父元素是body时

   a.滚动距离小于屏幕高度或宽度，它会固定在目标位置

  

 

   b.滚动距离大于屏幕高度或宽度，它的表现就像position:relative和1一样

  

 

当父元素不是body，在父元素高度内滚动时它会固定在目标位置，就像fixed

在父元素滚动为不可视时它的表现就像position:relative和1一样

 

 兼容： ie不兼容、google不完全兼容（thead、tr标签不支持）、firefox59以后兼容，之前版本不完全兼容(table标签不支持)