首页 > 代码库 > CSS中定位机制的想法

CSS中定位机制的想法

  对于一个刚刚接触css的新手而言,CSS的定位机制可能是最让人头疼的一件事情了, 接下来我们了解一下CSS的定位机制。

  position:static | relative | absolute | fixed

  适用于:除 <‘ display ‘> 属性定义为「table-column-group | table-column」之外的所有元素。

  继承性:无。

  归类总结一下定位的四种属性特点:

  

  绝对定位:

  1:单独标签设置定位的时候,以浏览器左上角为基准设置定位的。

  2:盒子嵌套的时候,如果父盒子设置了定位,那么子盒子是以父盒子左上角为基准设置定位的。如果父盒子没有设置定位,那么子盒子以浏览器左上角为基准设置定位的。

  3:设置了绝对定位的盒子,不占原来的位置。

  4:设置了绝对定位的盒子可以实现模式的转换)

  相对定位:

  1:以自己左上角为基准设置定位。

  2:相对定位占原来的位置

  3:相对定位不能实现模式的转换

  4:子绝父相(子元素设置绝对定位,父元素设置相对定位))

  固定定位(1:固定定位不占位置;

  2:可以实现模式的转换;

  3:以浏览器为基准进行定位;

  4:在屏幕上的位置固定不动。

  静态定位:(元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。

  尤其有一点要说明的是z-index:设置元素的堆叠顺序,只有设置了绝对定位或者相对定位的元素才会使z-index的值起作用。

  那么定位和浮动又有什么关系和区别呢?

  首先,定位和浮动都会使元素脱离标准文档流,定位往往会更加精确的使元素在某个特定的区域显示,而浮动则会有许多不确定性。这些不确定性往往会使页面产生一下超出我们预期范围的影响。

  而且浮动往往是针对网页中盒子布局的时候使用,或者在li标签中。定位往往针对的是某个具体的元素或者块。

  总而言之,不管白猫黑猫能够抓到老鼠的就是好猫,所以,不管浮动还是定位,能够达到预期效果的都是可取的。所以要多看多写代码,将这些结构布局熟记于心,才能更加流畅的运用。

  

 

CSS中定位机制的想法