CSS学习之position属性

 

Position:

a.static默认值

b.relative相对定位

c.absolute绝对定位

d.fixed固定定位

 

“已经定位”:含义是position属性被设置为除static外的三种方式任意一种

“祖先元素”:当前DOM节点的上一个父节点

 

A.static:position

默认的属性值，也就是该盒子按照标准流(包括浮动方式)进行布局

 

B.relative:

相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它

relative定位原则：1.使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置

　　　　　　　　　2.使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响

 

C.absolute:

绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子存在一样。

absolute定位原则:1.使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素(或上级元素)”为基准进行偏移。如果没有已经定位的祖先元素(上级元　　　　　　 　　　　素），那么会以浏览器窗口为基准进行定位

　　　　　　　　 2.绝对定位的框从标准流中脱离，这意味着它们对其后听兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样

D.fixed:

固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。

转载于:https://www.cnblogs.com/Vitus_feng/archive/2010/07/31/1789669.html