CSS定位布局主要是通过position属性来实现的，它有四个值：static、relative、absolute和fixed。
static：默认值，没有定位，元素出现在正常的流中。relative：相对于其正常位置进行定位。absolute：相对于最近的非static定位的父元素进行定位。fixed：相对于浏览器窗口进行定位。
实例代码：
<!DOCTYPE html>
<html>
<head>
<style>
.static {
position: static; /* 默认位置 */
left: 50px; /* 左侧偏移50px */
top: 20px; /* 顶部偏移20px */
}
.relative {
position: relative; /* 相对于正常位置定位 */
left: 40px; /* 左侧偏移40px */
top: 10px; /* 顶部偏移10px */
}
.absolute {
position: absolute; /* 相对于最近的非static定位父元素定位 */
left: 30px; /* 左侧偏移30px */
top: 5px; /* 顶部偏移5px */
}
.fixed {
position: fixed; /* 相对于浏览器窗口定位 */
right: 20px; /* 右侧偏移20px */
bottom: 15px; /* 底部偏移15px */
}
.parent {
position: relative; /* 设置为relative以便于absolute定位 */
width: 300px; /* 设置宽度 */
height: 200px; /* 设置高度 */
background-color: #f0f0f0; /* 背景颜色 */
border: 2px solid #000; /* 边框 */
}
</style>
</head>
<body>
<div class="parent">
<div class="static">Static</div>
<div class="relative">Relative</div>
<div class="absolute">Absolute</div>
<div class="fixed">Fixed</div>
</div>
</body>
</html>在这个例子中，.parent是一个相对定位的容器，其四个子元素分别使用不同的定位方式。.static是默认定位，.relative、.absolute和.fixed都是相对定位，.absolute的偏移是相对于.parent的。.fixed是相对于浏览器窗口的固定定位。