position属性详解

 1、static
    这是属性是positon的默认值,如果一个div我们没有给他任何的position,那么他不会脱离文档流,他的属性就是static,不理解这个我就没的说了...
2、absolute

 

绝对定位

从上图可以看出 absolute是脱离了文档流的,那绝对定位是如何进行定位的呢,这时候要注意了top和left两个属性。看例子:
view source
print ?
1. <style type="text/css">
2.     body{ margin:0; padding:0}
3.     #box{ background:#00F; width:1002px; height:500px; margin:0 auto}
4.     #abox{ width:150px; height:100px; background:green; position:absolute; left:50px; top:50px}
5. style>
6. <div id="box">
7.     <div id="abox"><DIV>DIV>
8. div>

在1024*768的分辨率下运行以上代码,此时发现abox距box的上、左距离都是50px,貌似设计的没有问题,此时我们把分辨率换成宽度大于1024的 此时就发现问题了,如我的是1600*1440,结果就变了

这说明本例中absolute的top和left值的是相对于浏览器边框的,如果我们想让abox距box的上左距离固定为50px的话(也就是说让top和left的值相对于某个div),那么我们需要在把box的position属性设置为relative。经过我自己的一些实践得出以下结论:
如果一个元素设置为absolute,那么他的top和left相对位置的寻找过程是这样的,首先他会检查他的父框是不是relative,如果是他就按照父框定位,如果不是他会继续寻找他父框的父框是不是relative,如果是就按照他父框的父框定位,如果不是他就去检查他父框的父框的父框是不是relative.....以此类推,如果他的所有祖先都没有relative,他就按照浏览器边框进行定位。
说的简单点,有两个div,分别是diva,divb,如果让diva相对于divb偏移,那么第一步设置diva为absolute,设置偏移量left top。第二步把diva放在divb的内部(儿子 ,孙子,重孙子等等都可以,只要是他的子元素就可以)

3、relative

相对定位,首先要明白相对定位只是相对某个元素的本身而言。这个没有脱离标准流,他按照标准流的方式排版。
比如仅设置了一个元素relative,那么他的位置和static一样,如果又设置了他的left和top,那么它会做一些偏移,偏移是相对于他本身而言,比如top:20px;left:30px;此时这个会在原来的位置上 向下移动20px,像右移动30px,要注意的是,这个元素移动之后的占用标准流的位置没有变化,就是说,没移动前他占用的是哪位置就是哪位置,不会因为移动了元素,导致整个文档布局发生改变。

4、fixed

固定位置,脱离了文档流,效果是无论怎么拖动滚动条,它始终固定在屏幕的指定位置,本来是挺好的一个功能,可惜的IE6不支持

5、inherit

这个同样没什么的说的,inherit就是继承,继承父元素的父元素的 position 值。

总结:不明白的地方多翻翻CSS手册,看明白了之后自己动手写写

你可能感兴趣的:(CSS)