1. 相对定位
相对定位是CSS中的一种定位方式，它是相对于元素在正常流中的位置进行移动。相对定位不会改变元素的布局，只会改变元素的视觉展现位置。
使用相对定位需要设置元素的位置属性为relative，然后可以通过设置top、bottom、left、right来指定元素相对于其正常位置进行移动。
相对定位的一个典型应用场景是创建一个相对于普通文本流稍微偏移的标注。
.relative {
position: relative;
top: 10px;
left: -5px;
}
2. 绝对定位
绝对定位是CSS中的另一种定位方式，它是相对于最近的已定位祖先元素进行定位的。如果没有已定位祖先元素，则相对于最初的包含块进行定位。
使用绝对定位需要设置元素的位置属性为absolute，同时通过设置top、bottom、left、right来指定元素相对于其已定位的祖先元素进行移动.
绝对定位的一个常见的应用场景是创建一个悬浮窗口或者菜单。
.absolute {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3. 浮动
浮动是CSS中用来实现文本环绕图片或者多列布局的一种技术。元素浮动后，其周围的内容会重新布局以适应浮动元素的位置。
浮动的元素会脱离正常文档流，进入浮动上下文。通过设置元素的float属性为left或right可以实现元素的左浮动或右浮动。
浮动元素在布局时会尽量靠近其上一个兄弟元素或父级元素的可用空间。浮动的元素可能会导致其容器高度塌陷，为了避免容器高度塌陷，可以通过在容器中插入一个空白的块级元素并设置其clear属性为both来清除浮动。
.float-left {
float: left;
width: 50%;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
4. 总结
在CSS中，相对定位、绝对定位和浮动是常用的布局技术。相对定位可以将元素相对于其正常位置进行移动，不改变元素的布局；绝对定位可以将元素相对于其已定位的祖先元素进行移动，常用来创建悬浮窗口或菜单；浮动可以实现文本环绕图片或多列布局，但需要注意容器高度塌陷的问题。
使用这些定位和浮动技术，我们可以更灵活地控制页面的布局和排版，实现更复杂的界面效果。