在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、浮动（float: ）
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
float属性可能的值：
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
CSS浮动设置示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
float: right;
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="images/1.jpg" /> 结果是这个图像会浮动到段落的右侧。
结果是这个图像会浮动到段落的右侧。 结果是这个图像会浮动到段落的右侧。
结果是这个图像会浮动到段落的右侧。 结果是这个图像会浮动到段落的右侧。
结果是这个图像会浮动到段落的右侧。 结果是这个图像会浮动到段落的右侧。
结果是这个图像会浮动到段落的右侧。
</p>
</body>
</html>
效果如下：
5、什么是文档流？
（1）定义：文档流中内联元素默认从左到右流，遇到阻碍或者宽度不够自动换行，继续按照从 左到右的方式布局。块级元素单独占据一行，并按照从上到下的方式布局。
（2）脱离文档流：文档一旦脱离文档流，在算其父元素的高度时，就不包括其自身了。注：在设 置浮动后元素脱离文档流会有会导致父元素高度塌陷。
那么应该如何解决在设置浮动后元素脱离文档流会有会导致父元素高度塌陷的问题呢？
<style type="text/css">
.box {
background: red;
}
.kid {
width: 100px;
height: 100px;
float: left;
}
.kid1 {
background: yellow;
}
.kid2 {
background: orange;
}
.box2 {
width: 300px;
height: 150px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div class="box">
<div class="kid kid1">子元素1</div>
<div class="kid kid1">子元素2</div>
</div>
<div class="box2">box2</div>
</body>
效果如图：由于父级元素没有高度，下面的元素会顶上去，造成页面的塌陷。
解决方法：
1. 子元素角度：添加一个新的子元素，并对其设置 clear:both;
.kid3 {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="kid kid1">子元素1</div>
<div class="kid kid1">子元素2</div>
<div class="kid3"></div>
</div>
<div class="box2">box2</div>
</body>
2. 父元素角度：对父元素添加样式overflow: hidden
.box {
background: red;
overflow: hidden;
}
