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

布局是html中非常重要的一部分，定位也是页面布局中经常使用的方法。今天我们将讨论在布局和度量中使用定位的技巧。

定位有4个属性，分别是static（默认）、absolute（绝对位置）、relative（相对位置）、fixed（固定位置——相对于浏览器窗口）。

第一个位置：相对

生成的位置相对于自身定位。需要注意的是，使用position:relative的元素并没有脱离文档的流动，原来位置占用的空间仍然存在，只是位置发生了变化。种类。一般来说，relative很少用来改变位置。主要用于设置child绝对定位的参考对象。

2.position:absolute

绝对位置是布局中最常用的位置。生成的位置通过position属性相对于父级（parent...）放置；如果没有parentposition属性，则相对于文档定位；使用绝对定位后，定位的元素位于文档流之外。此时，父级将无法检测所放置元素的宽度和高度。行内元素使用绝对定位后，可以设置宽度和高度；元素不能同时使用绝对定位和浮动。

可以看到子span标签完全放置后，可以设置宽度和高度，父级无法查到子级的宽高，所以没有子级去拉伸它；

3.position:fixed

固定位置是相对于浏览器窗口定位的，因此也与文档流分离。与绝对一样，父级不会检测放置元素的宽度和高度。使用绝对定位对inserts进行定位后，可以设置宽度和高度；元素不能同时使用固定定位和浮动定位。

z-index 属性：

使用放置的元素将具有 z-index 属性。

位于同一层级的元素的值越大，其显示的位置就越高

。对于这个属性，需要注意的是，比较的时候，是比较同级别的位置元素。

当两个带有子元素的父元素（绿色和灰色 DIV）重叠时，上一级父元素（绿色 DIV）中的子元素（黄色 DIV）始终位于顶部，即使父元素位于下一级( 灰色 DIV 中的子元素（红色 DIV）的 z-index 值较大。