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

你可能感兴趣的:(CSS定位)