1. 学习定位的目标
2. 浮动和定位的应用场景
3. 定位的组成
定位=定位模式（用于指定一个元素在文档中的定位模式）+边偏移（决定该元素的最终位置）
3.1 静态定位（了解）
3.2 相对定位（重点：相对于自己原来的位置而走）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>相对定位</title> <style> .box1 { position: relative; top: 100px; left: 100px; width: 200px; height: 200px; background-color: pink; } .box2 { width: 200px; height: 200px; background-color: deeppink; } </style> </head> <body> <div class="box1"> </div> <div class="box2"> </div> </body> </html>
3.3 绝对定位（重要：绝对定位不占位置，可以在盒子内自由移动（子绝父相））
注意：子盒子是绝对定位的话，父盒子采用相对定位
子绝父相的案例：
