一、position属性
position属性是CSS中最常用的定位属性之一，它可以让元素相对于文档流中的其它元素进行移动。position属性的取值有static、relative、absolute、fixed和sticky。1、static
static是position属性的默认值，它表示元素正常的排布方式，即按照其在文档流中出现的位置进行排布，无需通过top、bottom、left和right属性进行设置。2、relative
relative可以相对于元素本身进行移动。通过设置top、bottom、left和right属性，可以让元素在自己原本定位的基础上进行移动。例如： .relative {
position: relative;
top: 20px;
left: 10px;
}
上述代码表示将元素向下移动20px，向右移动10px。
3、absolute
absolute可以相对于最近的已定位的祖先元素进行移动。如果不存在已定位的祖先元素，则相对于文档的初始坐标进行移动。与relative不同，在使用absolute时，需要使用top、bottom、left和right属性进行定位。例如： .absolute {
position: absolute;
top: 100px;
left: 200px;
}
上述代码表示将元素移动到距离最近已定位的祖先元素的顶部100px，距离左侧200px。
4、fixed
fixed可以相对于浏览器窗口进行移动，无论用户滚动页面的时候还是缩放窗口的时候，元素位置都不会发生改变。同样地，使用top、bottom、left和right属性进行定位。例如： .fixed {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
上述代码表示将元素移动到浏览器窗口垂直方向的中间，距离左侧50%。
5、sticky
sticky可以相对于其在文档流中的位置进行移动，但是当元素滚动到特定位置的时候，则变成fixed的定位方式。同样地，使用top、bottom、left和right属性进行定位。例如： .sticky {
position: sticky;
top: 20px;
left: 10px;
}
上述代码表示在元素距离顶部20px的位置时，将元素改变成fixed的定位方式。
二、z-index属性
z-index属性决定了元素在层叠上下文中的位置，即确定了哪个元素显示在哪个元素的前面。在层叠上下文中，z-index属性的值越大，元素的显示层级就越高。如果两个元素的z-index值相同，则会根据它们在文档流中的顺序来决定显示的前后顺序。 例如： .my-div1 {
position: absolute;
z-index: 1;
}
.my-div2 {
position: absolute;
z-index: 2;
}
上述代码表示my-div2元素会显示在my-div1元素的前面。
三、float属性
float属性可以让元素向左或向右对齐，使得后面的元素可以环绕在其周围。使用float属性可以实现CSS中的多列布局。例如： .my-div {
float: left;
width: 200px;
margin-right: 20px;
}
上述代码表示将my-div元素向左对齐，设置宽度为200px，并在其右侧添加20px的margin。
四、clear属性
clear属性用于清除浮动。使用clear属性可以防止后面的元素受到之前元素的浮动影响。clear属性的取值有none、left、right、both，其中none为默认值，表示不清除浮动，left和right表示清除向左或向右的浮动，both表示清除向左和向右的浮动。 例如： .clearfix::after {
content: "";
display: block;
clear: both;
}
.my-div {
float: left;
width: 200px;
margin-right: 20px;
}
.other {
background-color: #F5F5F5;
}
上述代码表示在clearfix元素之后插入一个空白块元素，并清除向左和向右的浮动。避免其他元素受到浮动的影响。
