分分钟学会定位以及解决高度塌陷

对于我们一些小白同学来说，排版的时候面对css里面的position属性的时候会不会头痛不知道用哪个然后随便选一个？咱们耐着性子往下看完，分分钟弄明白position属性

    position属性可以指定一个元素（静态的，相对的，绝对或固定）的定位方法；

    其属性值有absolute、fixed、relative、static、sticky、inherit、initial，在这里我会着重给大家讲解一下前面几个常用的属性值，让大家用起position不再害怕。

position:relative; 相对定位，相对于自己原来的位置进行定位；可用于微调元素，但是他有后来者居上的坑，慎用于微调；多数为了做绝对定位的参考；

position:absolute; 绝对定位，相对于最近的有定位（除static定位）的上级（父级没找到就一直往上找以至参考最外层body）；脱离文档流不占位，无视父元素内部的padding部分，不包含边框；例如二级菜单

position:fixed; 固定定位，相对于浏览器窗口进行定位，脱离文档流不占位；例如浏览器侧边广告

position:static;默认值，没有定位，元素出现在正常的文档流中；

position:sticky; 粘性定位，该定位基于用户滚动的位置。在窗口内的时候，其行为与相对定位（position:relative）一样；超出窗口的时候，它的表现就像固定定位（position:fixed）。

前面说了position里面有几个属性值是脱离文档流的，这时你会发现该父盒子会出现高度塌陷的问题导致影响其他模块的排版，导致高度塌陷原因除了固定定位和绝对定位还有浮动。

高度塌陷解决方法：

1、给父元素加伪元素

2、给父元素加overfloat:hidden;

3、子集新加一个div清除左右两边浮动clear:both;（导致代码不简洁，不推荐）

4、直接给父元素加高度

5、父元素加display:inline-block

以上的内容都学会了么？记得点点关注点点赞哦~

不点赞不让走