css笔记3

css定位
position relative absolute static fixed
相对 绝对 无定位 固定
默认无定位
相对定位 相对定位的偏移参考元素是元素本身。不会使元素脱离文档流。元素的初始位置占据的空间会被保留。

主要代码 position:relative;
相对位置的偏移 是相对于自己以前的位置进行的偏移
相对定位一般不作为元素单独显示 而是作为容器进行包含 配合其他子元素将相对定位做成父元素来使用

绝对定位 相对于已定位的最近的祖先元素，如果没有已定位的最近的祖先元素，那么他的位置就相对于最初的包含块（如 body）
主要代码 position：absolute；
绝对定位会产生浮动效果
绝对定位，会产生浮动的效果，破坏原有的文档流，不同区域之间可以实现重合，叠加。

固定定位 相对于浏览器窗口进行定位
主要代码 position：fixed
示例：演示div相对浏览器位置不改变的效果 移动滚动条位置不发生改变

相对定位与绝对定位
参照物：自己 最近的父级元素
不破坏文档流 破坏文档流
通常情况下 相对定位作为父一级单位 绝对定位作为子一级单位
相对定位可以不设置 top left 依然保留在原位置 供绝对定位有参照物

浮动与定位
浮动与绝对定位的组合 都会破坏文档流 破坏之后 绝对定位会忽略绝对定位所占用的位置 而浮动会绕过浮动所占用的位置
浮动与相对定位的组合 便兼具两者的特点，既可以采用浮动 又可以偏移