1. 盒子的定位

盒子的排列方式是基于文档流的，默认是从上到下、从左到右的顺序，这种排列方式叫做标准文档流。然而，标准文档流的布局方式较为单一，CSS为我们提供了更灵活的定位方式。通过使用position属性，我们可以将盒子放置在特定的位置，甚至脱离文档流的限制。这就是定位的基本思想。

定位的概念：在广义上，定位是指将元素放置在特定位置的操作，可以通过CSS或传统表格布局实现。狭义上，定位是CSS中的position属性，它是布局的核心之一。常见的position属性值包括静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。

1.1 静态定位（static）

静态定位是盒子的默认定位方式，所有未设置position属性的盒子都会采用静态定位。静态定位的特点是盒子不会脱离文档流，其他盒子仍然可以正常地排列和布局。静态定位的优势在于简单且符合标准文档流的布局方式。

1.2 相对定位（relative）

相对定位是与静态定位相对的定位方式。当盒子设置为相对定位时，它仍然会保留在文档流中，但它会相对于自身的位置进行布局。这意味着相对定位的盒子可以通过设置left、right、top、bottom等属性来确定相对于自身的位置关系。

1.3 绝对定位（absolute）

绝对定位允许盒子完全脱离文档流，位置由浏览器窗口、父容器或其他参考元素决定。绝对定位的盒子不会受到其他盒子的影响，可以在网页中自由移动。绝对定位的常见用途包括创建浮动元素和布局精确控制。

1.4 固定定位（fixed）

固定定位与绝对定位类似，但它的定位是相对于浏览器窗口（即 viewport）的。固定定位的盒子会随着窗口滚动而移动，但不会随着父容器的变化而变化。固定定位常用于创建全屏布局或元素悬停效果。

通过以上几种定位方式，我们可以根据具体需求选择合适的定位策略，从而实现更灵活的网页布局。