CSS中的元素定位（Position）

position是什么？有什么作用？

---

Position Layout Module:  提供与元素定位和层叠相关功能，他是核心模块

1.  盒子模型的类型和尺寸
2. 布局模型
3. 元素之间的关系
4. 视口大小、图像大小等其他相关方面

---

作为position属性

 

position: static            自然模型/常规定位/自然地位

• 作用： 使元素定位于常规/自然流中
• 特点：

1. 忽略top、bottom、left、right或者z-index
2. 两个相邻的元素如果都设置了外边距，最终外边距=两者中外边距最大的
3. 具有固定width和height值的元素，如果把左右外边距设置为auto，则左右外边距会自动扩大占满剩余快读，造成的效果就是这个块水平居中

position: relative       相对定位模型

• 作用： 使元素成为containing-block( 可定位的祖先元素，别的元素可以相对于它进行定位）
• 特点：

1. 可以使用top/right/bottom/left /z-index进行相对定位——相对于它本身所占位置
2. 相对定位的元素不会离开常规流
3. 任何元素都可以设置为relative，它的绝对定位的后代都可以相对于他进行定位——超好用
4. 可以使浮动的元素发生偏移，并控制它们的堆叠顺序