讲一讲css定位

CSS position 属性
通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

1. static特点：按照标准流特性摆放位置，没有边偏移，在布局中很少用到。
2. relative特点：它是相对自己原来的位置移动的，原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。（不脱标，继续保留原来位置）
3. absolute特点：如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位；如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的祖先元素定位为参考点移动位置
4. fixed特点：以浏览器的可视窗口为参照点移动元素；跟父元素没有任何关系，不随滚动条滚动。主要使用场景：可以在浏览器页面滚动时让元素位置不变；固定定位是脱标的。

注意：子绝父相：即子级绝对定位父级要相对定位。
子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他兄弟盒子；父盒子需要加定位限制盒子在父盒子内显示；父盒子布局时，需要占有位置，因此父盒子只能是相对定位。
总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位。