CSS定位

CSS定位在布局的时候绝对是一大主力，从css1的浮动到css2定位支持远胜对其他的支持到现在css3定位的稳定，css的定位的地位不言而喻。

CSS定位有三个：普通流（也有人叫标准流）、浮动和定位流（纯属个人理解）。

普通流：由HTML标签特性决定，块、行、行内，由标签特性由上往下布局。

浮动：算是比较特殊的定位，浮动也脱离了普通流，也就是脱离了HTML的文档流。

定位流：有static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）四种定位。

Static就是普通流，就是没有加其他定位和浮动时候的文档流，每一个接触前端的都是从这个开始学起。不过有个例外，就是相对定位relative，很多人会把它归到普通流里面，因为元素位置相对于它本身在普通流的定位。

浮动，一个比较特殊的定位，脱离了文档流，不会超出父元素，会随着父元素移动，父元素不会因为浮动的内容增加宽高。

相对定位relative：完全跟普通流一样，只不过调整距离的时候是按照自身的位置调整，不是根据附近的节点。主要用途是用来给绝对定位一个盒子。

绝对定位absolute：脱离文档流，相对于其包含块定位，在没有设置距离的时候会随着父元素移动，设置距离的时候在没有相对定位的块里面，以body为块。在设置相对定位的块里面，设置距离以这个块为准。

固定定位fixed：脱离文档流，以可视区域为准，会一直显示在可视区域，屏幕滑动也会显示在定位的位置。

欢迎关注Coding个人笔记 公众号

转载于:https://juejin.im/post/5c4ad65351882525eb365db6