定位

一、元素的定位属性

主要包括2种：定位模式和边偏移

1.边偏移：

属性值：top  顶端偏移量，定义元素相对于其父元素上边线的距离

                  bottom低端偏移量，定义元素相对于其父元素下边线的距离

                  left左侧偏移量，定义元素相对于其父元素左边线的距离

                  right右侧偏移量，定义元素相对于其父元素右边线的距离

2.定位模式：

         语法格式：选择器{position：属性值}

         position常用属性

                  static  自动定位（默认定位方式）

                  relative 相对定位（相对于原文档流的位置进行定位）

                  absolute 绝对定位（相对于其上一个已经定位的父元素进行定位）

                  fixed   固定定位（相对于浏览器窗口进行定位）

（1）static静态定位

         静态定位是所有元素的默认定位方式，当position属性取值为static时，可以将元素定位于静态位置，其实就是标准流的特性

         在静态定位状态下，无法通过边偏移（top  bottom  left  right） 来改为元素的位置

         用途：一般用来清除定位，一个原来有定位的盒子，不想加定位了，就写static

（2）relative相对定位（自恋型）

         相对定位是将元素相对于它在标准流中的位置进行定位，对元素设置了相对定位后，可以通过边偏移改变元素的位置，但是它在文档流中的位置仍然保留

         注意：

                  a 相对定位最重要的一点是可以通过边偏移移动位置，原来所占有的位置继续占有

                  b 每次移动位置，是以自己的左上角为几点移动

         相对定位的盒子仍在标准流中，后边的盒子扔以标准流的方式对待它（相对定位不脱标）。

         如果说浮动的主要目的是让多个块级元素一行显示，那么定位的主要价值就是移动位置，让盒子移动到想要的位置。

（3）absolute 绝对定位（拼爹型）

                  注意：

                          a如果文档可以滚动，绝对定位元素会随着它滚动，因为元素最终会相对于正               常流的某一部分定位。

                          b 可以通过边偏移移动位置，但它完全脱标，完全不占位置

                  父级没有定位：

                          以浏览器为准对齐

                  父级有定位：

                          根据最近的已经定位的父元素进行定位

                  子绝父相：

                           子级是绝对定期，不会占有位置，可以放在父盒子里面的任何一个地方，父盒              子布局时，需要占有位置，因此父盒子只能是相对定位

                  盒子水平/垂直居中

                          普通盒子使用margin左右改为auto即可，但是对于绝对定位无效

                  定位的盒子有一个算法，可以做到水平或垂直居中

                  a.left 50%

                  b 走自己外边距负的一半值

（4）fixed 固定定位（认死理型）

                  固定定位是绝对定位的一种特殊形式，以浏览器窗口作为参照物来定义网页元素，当position取值为fixed时，即可将元素定位模式设置为固定定位

                  当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置，不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素始终会显示在浏览器窗口的固定位置。

         固定定位有两点：

                          a 固定定位的元素跟父亲没有任何关系，只认浏览器

                          b 固定定位完全脱标，不占有位置，不随着滚动条滚动

IE6等低版本浏览器不支持固定定位。

淘宝网使用：