CSS中的定位和解决父元素高度塌陷

元素高度塌陷"/>

CSS中的定位和解决父元素高度塌陷

 在CSS中，Position 属性经常会用到，主要是绝对定位和相对定位，简单的使用都没有问题，尤其嵌套起来，就会有些混乱，今记录总结一下。

1、相对定位( position: relative;)

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

 relative：生成相对定位的元素，相对于其正常(原来)位置进行定位。

2、绝对定位（position: absolute;）

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位        置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

3、固定定位（position: fixed;）

position: fixed; 的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

4、粘滞定位（position: sticky;）

粘性元素根据滚动位置在相对（relative）和固定（fixed）之间切换。起先它会被相对定位，直到在视口中遇到给定的偏移位置为止 - 然后将其“粘贴”在适当的位置（比如 position:fixed）。

5、浮动&