css-position 定位

今天分享给新前端同事的基础知识总结，也算是自己的复习

position

属性值一共有4个

static ：正常文档流 干嘛用呢... 实际应用中 可能写过某个公共样式定义了一个元素为定位，但是某一个地方的实际应用你需要一个正常的文档流 抛弃定位 那就用这个 给改过来

一个元素，只要用上下面的三个属性值，不管是内联元素 还是行内元素，直接会变成内联块，也就是相当于 display:inline-block

relative： 相对定位，相对于自己，挪一个位置，虽然也形成了一个层 但是原来的位置不变，有点霸道的意思，就是我可以到处飘 但是我原来的得给我留着 我不用别人也不能占用

absolute：绝对定位 ，它要是出现 必须有参照物，也就是他的 父节点 或者爷爷节点 或者祖宗节点上应该出现一个 相对定位 position:relative,要是没出现 参照物就是浏览器窗口

fixed：恒定位 这个最简单，就是以浏览器窗口作为参照物

1.position：relative；

解释说明1

2.position：absolute

***首先提醒 在遇到不规则排列时 尽量标准文档流处理 别一看见啥不好写 就定位，position比较耗性能

解释说明2

常用的配合使用技巧 （应该挺多，临时就想起这一种，其他可以自己补充）

（1）与margin配合，变相居中对齐

   html 提供的属性 只能实现 水平居中 不能实现多行垂直居中（现在有flex布局可以用，下面的就是个例子，兼容低版本浏览器 可以用）

解释说明3

3.position:fixed

最简单的一种 就是根据浏览器窗口作为参考，

前面说如果position：absolute 父节点如果没有参考物 最终也参考浏览器窗口

本质差别是 如果内容超过一屏幕 向下滚动式 position：absolute 会跟着滚动 position：fixed不会