position定位在html布局中的使用技巧和注意事项

布局是html中非常重要的一部分，而定位在页面布局中也是使用频率很高的方法，今天我们就说说定位在布局中的使用技巧和注意事项。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/31296.html

position定位有4个属性，分别是static(默认），absolute（绝对定位），relative（相对定位），fixed（固定定位--相对于浏览器窗口）。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/31296.html

1.position:relative

生成的位置相对于自身定位的，需要注意的是使用position:relative的元素并没有脱离文档流，且原来的位置占用的空间依旧存在，只是位置发生了变化。一般使用relative来改变位置比较少，主要是用来设置子级的absolute定位的参考对象。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/31296.html

可以看到在对子级span标签absolute定位之后，可以设置宽高，且父级无法检测到子级宽高，所以无法有子级来撑开；文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/31296.html

3.position:fixed

fixed定位是相对于浏览器窗口来定位的，所以也是脱离了文档流，与absolute一样，父级会检测不到定位元素的宽高。inline元素使用absolute定位之后，可以对其设置宽高；元素是不可以同时使用fixed定位和浮动的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/31296.html

z-index属性：

使用定位后的元素都会有z-index属性，文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/31296.html

同级定位元素这个值越大，其显示越靠前文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/31296.html

。这项属性需要注意的是比较时是同级定位元素进行比较。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/31296.html

当两个拥有子元素的父级元素（绿色和灰色DIV）重叠时，层级高的父元素（绿色DIV）里的子元素（黄色DIV）永远在上层，即使层级底的父元素（灰色DIV）里的子元素（红色DIV）z-index的值较大。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/31296.html