position的8种定位方式

大家好，欢迎来到IT知识分享网。

position定位的八种方式： 

一、常见/用的四种

1.static

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

2.relative

生成相对定位的元素，相对于其正常位置(正常位置解释：关于包含块（containing block）的理解)进行定位，一般在子元素设置absoute定位时，给父元素设置relative

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

3.absolute

生成绝对定位的元素，相对于 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的值为不设置：

兼容：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标签不支持)