CSS中定位机制的想法

Posted 2020-08-08 奋斗的小小牛

　　对于一个刚刚接触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标签中。定位往往针对的是某个具体的元素或者块。

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