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标签中。定位往往针对的是某个具体的元素或者块。
总而言之,不管白猫黑猫能够抓到老鼠的就是好猫,所以,不管浮动还是定位,能够达到预期效果的都是可取的。所以要多看多写代码,将这些结构布局熟记于心,才能更加流畅的运用。