CSS定位

本文章所有权归饥人谷_Lyndon和饥人谷所有

1. 有几种定位方式，分别是如何实现定位的，参考点是什么，使用场景是什么？

• position: relative 相对定位：相对于元素的正常位置进行定位；参考点为元素原来的位置；在使用相对定位时，无论是否进行移动，元素在文档流中仍然占据原来的空间，只是表现出来的位置会改变；
• position: absolute 绝对定位，相对于static（默认值，没有定位）以外的第一个父元素进行定位；参考点为第一个父元素；根据定位点的padding进行偏移；不占据文档空间，普通流中的元素布局就像绝对定位元素不存在；
• position: fixed 固定定位，相对于浏览器窗口进行定位；参考点为浏览器窗口；固定定位的元素也不包含在文档流中；
• position: sticky CSS3新属性，表现类似relative和fixed的集合体，目标区域在屏幕可见时，它的行为像position: relative，当页面滚动超出目标区域时，它的行为像position: fixed。
• 因为不熟练，所以对每一种定位方式做出实践：

• 普通流

定位-1.png

• 相对定位

定位-2.png

• 绝对定位

• 固定定位

定位-4.png

2. z-index 有什么作用? 如何使用?

绝对定位（absolute）与文档流无关，所以绝对定位的元素可以覆盖页面上其他的元素，通过z-index属性控制叠放顺序，z-index越高，元素的位置越靠上。

定位-5.png

3. position:relative和负margin都可以使元素位置发生偏移，二者有什么区别？

position:relative在元素偏移时不影响其他元素，因为其文档流的位置未发生任何改变；但是负margin影响其他元素，使得与其相近的元素也会发生偏移。

定位-6.png

定位-7.png

4. 如何让一个固定宽高的元素在页面上垂直水平居中?

方法：使用绝对定位，分别向右、向下移动相对高、宽50%的距离，此时图形的起点位于页面中心，需要再将其向左、向上移动一半的width和一半的height，一般采用负margin的方法。

定位-8.png