CSS position 属性定位问题

 

static
默认值。无特殊定位，对象遵循HTML定位规则（忽略 top, bottom, left, right 或者 z-index 声明）。

 

 

absolute

 

将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body对象。

 

这个属性总是有人给出误导。说当position属性设为absolute后，总是按照浏览器窗口来进行定位的，这其实是错误的。
（1）当A的父对象B也设置了position属性(不是默认值的情况)，此时A按照这个B来进行定位。
注意，对象虽然确定好了，但有些细节需要您的注意，那就是我们到底以B的哪个定位点来进行定位呢？如果B设定了margin，border，padding等属性，那么这个定位点将忽略padding，将会从padding开始的地方(即只从padding的左上角开始)进行定位，这与我们会想当然的以为会以margin的左上端开始定位的想法是不同的。接下来的问题是，sub2的位置到哪里去了呢？由于当position设置为absolute后，会导致sub1溢出正常的文档流，就像它不属于parent一样，它漂浮了起来，在DreamWeaver中把它称为“层”，其实意思是一样的。此时sub2将获得sub1的位置，它的文档流不再基于sub1，而是直接从parent开始。
（2）如果sub1不存在一个有着position属性的父对象，那么那就会以body为定位对象，按照浏览器的窗口进行定位，这个比较容易理解。

 

fixed

 

屏幕定位

 

 

relative

 

当前位置偏移，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置