web前端开发|position的8种定位方式 postion:inital|postion:inhert|postio

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
【web前端开发|position的8种定位方式】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标签不支持)