一、绪论
CSS 盒子的定位是指在网页中对盒子进行位置的移动和调整。网页设计中经常需要调整元素的位置，例如图片和文字的位置调整、弹出层和模态框的位置控制。可以使用 CSS 盒子的定位来实现这些效果。使用 CSS 盒子的定位，可以使页面的排版更加灵活，从而适应不同分辨率和设备的屏幕大小。
二、CSS 定位方式
CSS 盒子的定位主要有四种方式：
1. 静态定位（static）
静态定位是默认的盒子定位方式，盒子按照文档流排列。静态定位盒子的 left、top、right、bottom、z-index 属性无效。
2. 相对定位（relative）
.box {
position: relative;
left: 30px;
top: 50px;
}
相对定位盒子的定位相对于自己的位置进行调整，使用 left、top、right、bottom 属性控制位置的偏移。偏移量会影响其他元素的定位，但不影响其占用的空间。
3. 绝对定位（absolute）
.box {
position: absolute;
left: 30px;
top: 50px;
}
绝对定位盒子的定位相对于最近的非 static 属性的祖先元素进行调整，如果没有祖先元素，则相对于浏览器窗口。绝对定位盒子从文档流中脱离，不占用空间。使用 left、top、right、bottom 属性控制位置的偏移。
4. 固定定位（fixed）
.box {
position: fixed;
left: 30px;
top: 50px;
}
固定定位盒子的定位相对于浏览器窗口，不随页面滚动而移动。固定定位的盒子与绝对定位类似，不占用文档流中的位置，对其他元素的定位没有影响。使用 left、top、right、bottom 属性控制位置的偏移。
三、CSS 定位属性
CSS 盒子的定位主要通过以下属性实现：
1. left
left 属性指定盒子左侧边框的水平位置。
2. top
top 属性指定盒子顶部边框的垂直位置。
3. right
right 属性指定盒子右侧边框的水平位置。
4. bottom
bottom 属性指定盒子底部边框的垂直位置。
5. z-index
z-index 属性指定盒子的层叠顺序。
四、CSS 定位案例
以下是一个使用 CSS 盒子定位的实例，实现了一个弹出层的效果：
CSS 盒子定位示例 标题
内容
<input type="text"> <input type="button" value="提交">×