Html&CSS之定位
定位
- 定位指的是将指定的元素摆放到页面的任意位置
通过定时可以任意的摆放元素
-
通过position属性来设置元素的定位
可选值：
static：默认值，元素没有开启定位
relative：开启元素的相对定位
absolute：开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
当元素的position属性设置为relative时，则开启元素的相对定位
1、当开启元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化。
2、相对定位是相对于元素在文档流中原来的位置进行定位。
3、相对定位的元素不会脱离文档流。
4、相对定位会使元素提升一个层级（如果开启相对定位的元素与没有开启相对定位的元素重叠，开启相对定位的元素会覆盖没有开启相对定位的元素）。
5、相对定位不会改变元素的性质，块元素依旧是块元素，内联元素依旧是内联元素。
当元素的position属性设置为absolute时，则开启元素的绝对定位
1、开启绝对定位，会使元素脱离文档流。
2、开启绝对定位后，如果不设置偏移量，则元素的位置不会发生变
生变化。
3、绝对定位是相当于离它最近的开启了定位的祖先元素进行定位，
如果所有的祖先元素都没有开启定位，则相对于浏览器窗口进 行定位。（一般开启了子元素的绝对定位都会开启父元素的相 对定位）
4、绝对定位会使元素提升一个层级。
5、绝对定位会改变元素的性质
内联元素变成块元素
块元素的宽度和高度默认都被内容撑开
当元素的position属性设置为fixed时，则开启元素的固定定位
固定定位也是一种绝对定位，它的大部分特点都和绝对定位一样
不同的是：
固定定位永远都会相对于浏览器窗口进行定位
固定定位会固定在浏览器窗口的某个位置，不会随滚动条滚动
IE6不支持固定定位
当开启了元素的定位（position属性值是一个非static的值）时：
可以通过left right top bottom四个属性来设置元素的偏移量，通过使用一个水平方向和一个垂直方向的偏移量进行定位。