关于position标签的一点心得

position

position是css中的一个非常常见的属性，同时也非常重要，我们在做前端布局时，position这个属性可以说是必不可少，如果不弄清楚它的值得含义，对于前端工作者来说是非常麻烦的

position分为static,fixed,absolute,relative,inherit

static(静态定位):这是页面元素position属性的默认值，元素将按照标准流进行排布（包含浮动方式），即按照浏览器对网页中元素的排列规则排列，切记这个时候top，bottom，left，right这些属性是没有任何卵用的。

fixed(固定定位)：一旦有元素的position属性使用这个值，那么该元素则是相对浏览器窗口为基准进行定位的，无论你的滑动条怎样移动，它都会固定在相对于浏览器窗口的固定位置，这里需要注意的是元素使用了该值后，它的兄弟元素将会在位置排布上忽视它的存在。这个时候用的top，bottom，left，right也是相对浏览器窗口的

absolute(绝对定位)：它与fixed比较类似，元素的position属性使用该值后，他的兄弟元素将会在位置排布上忽视他的存在。但是使用position的该值的元素定位是相对于已经设置过position属性值（除static以外的任何值）的最近祖先元素的（即该元素的top，bottom，right，left属性是相对于已经设置过position属性值（除static以外的任何值）的最近祖先元素的）

relative(相对定位)：相对定位的这个相对呢是相对于元素之前正常默认的static值位置定位的（即该元素的top，bottom，right，left属性是相对于不设置position属性（即默认值static）时的位置的）

inherit(继承定位)：即继承父元素的position值，没啥好说的，但是需要注意的是：使用ie的小伙伴们不要使用该值，因为ie浏览器并不认识他

最后做一个小提示：有的人会觉得是不是使用了有些position值后margin就没有用了，其实不是这样的，因为有部分人因为基础不牢喜欢用margin定位间隔（包括我以前也是），使用了某些position值后造成了视觉上的margin失效，其实margin是元素（盒子）本身的属性，是元素的一部分，不存在失效一说。之后的随笔内容会提到

由于本人水平有限，如果有大神发现哪里有问题或者有朋友认为哪里不清楚，欢迎联系[e-mail]进行交流！

呱！呱！呱！