CSS深入理解之absolute&relative

在CSS中，`absolute`和`relative`是两种常见的定位方式，用于控制元素在文档中的位置。
`relative`定位是相对元素在正常文档流中的位置进行定位的。设置元素的`position`属性为`relative`后，可使用`top`、`right`、`bottom`、`left`属性来调剂元素的位置。这些属性是相对元素本身的位置进行偏移的，可使用正负值来指定偏移的方向和距离。例如，`top: 10px`将元素的顶部向下偏移10像素。
`absolute`定位是相对最近的具有定位属性（`position`属性为`relative`、`absolute`或`fixed`）的父元夙来进行定位的。如果没有找到具有定位属性的父元素，则相对最初的包括块（通常是浏览器窗口）进行定位。与`relative`定位类似，`absolute`定位也能够使用`top`、`right`、`bottom`、`left`属性来调剂元素的位置，但这些属性是相对父元素的位置进行偏移的。例如，`top: 10px`将元素的顶部与父元素的顶部相距10像素。
需要注意的是，使用`absolute`定位后，元素会脱离正常的文档流，不再占据本来的空间。这意味着其他元素可能会占据脱离文档流的元素本来的位置。为了不这类情况，可使用`relative`定位来创建一个参考容器，然后在其中使用`absolute`定位。
总结来讲，`relative`定位是相对元素本身进行定位的，而`absolute`定位是相对父元素进行定位的。通过公道应用这两种定位方式，可以实现各种复杂的布局效果。