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:

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

你可能感兴趣的:(position)