CSS 定位

文章目录
  1. 1. position各属性值详解

将窗体自上而下分成一行行，并在每一行中从左到右的顺序排放元素，即为文档流。有三种情况将使得元素脱离文档流，分别是浮动(float left or right)、绝对定位(position:absolute)、固定定位(position:fixed)。CSS定位，就是元素的position不为static。而该元素将成为其亲子元素的offsetParent，也有机会成为其孙元素的offsetParent。

position各属性值详解

  1. static
    默认值，元素将按照正常文档流规则排列；

  2. relative
    相对定位，元素仍然处于正常文档流当中，但可以通过left、top、right和bottom的CSS规则来改变元素的位置。
    注意：元素原来位置将保留，不被其他元素所占据;
    当使用left，top改变元素位置时，元素将以原来位置的border外边框的左上角作为参考点 ;

  3. absolute
    绝对定位，元素脱离正常文档流，可通过left、top、right和bottom的CSS规则来改变元素的位置。
    注意：元素将不再占据原有位置;
    当元素的offsetParent为body而且body没有进行CSS定位，则参考点为页面;其他情况，参考点为offsetParent的padding外边框。

  4. fixed
    固定定位，元素脱离正常文档流，可通过left、top、right和bottom的CSS规则来改变元素的位置。
    注意：元素将不再占据原有位置;
    以浏览器的可视区域的四角作为参考点；IE5.5~6不支持该属性值。
    当你想在页面的某个区域始终存在（浮动）一个网页元素，比如一个DIV，你希望它能始终浮动在窗口的某个位置（比如页面两侧）。在IE7以上的浏览器以及标准浏览器，都支持一个属性 position:fixed ，可以很简单地实现想要的效果，而且当窗口滚动时，该元素的滚动也会很平滑。。。但是在IE6及以下的版本浏览器下，并不支持该属性，所以只好使用position:absolute来代替实现，但新问题出现，你会发现，当滚动窗口时，该元素会出现抖动的现象，看起来就很不舒服，为了去掉这个抖动的BUG，为了实现平滑滚动，就有了以下这个css代码。

    1
    2
    3
    4
    * html{
           background-image:url(about:blank);
           background-attachment:fixed;
    }

注释：*html是ie7的hack,hack就是一些不标准的写法，奇技淫巧，一般是为了解决浏览器不兼容的问题，也有其他的，不过随着大厂商对IE6，7，8的抛弃，这些基本已经成为历史了。JS也有hack，不过因为jquery的存在，jquery帮我们解决了，jquery屏蔽了浏览器的差异，提供给我们一个统一的接口，jquery源码有很多hack，css如果用sass,less这些css处理器也可以达到这个效果，按照标准的写，自动生成兼容不同浏览器的css。sass,less的其他优点包括：对于大型项目易于维护；可以让CSS的开发变得简单和可维护；提高开发效率等。
注意的是定位的参照： relative参照于自己该出现的位置，而absolute参照于祖先元素中与自己最近的已定位元素(relative或者absolute)直到body元素。