细谈position属性:static、fixed、relative与absolute

在CSS中，有一个非常重要的属性叫做position，它控制了HTML元素的位置和布局。position属性可以有四个取值：static、fixed、relative和absolute。本文将详细介绍这四个取值及其使用场景。

static

默认情况下，所有的HTML元素的position属性都是static。这种情况下，元素的位置严格按照HTML文档流的顺序排布，无法通过top、bottom、left、right属性进行调整。

div {
    position: static;
}

relative

相对定位（relative）是指元素的定位相对于元素文档流中的位置进行计算。相对定位与static定位的区别在于：

• 通过top、bottom、left、right属性可以微调元素的位置。

• 元素的位置发生微调，但是文档流中的位置没有改变，其他元素的位置仍然按照原来的顺序排布。

div {
    position: relative;
    top: 10px;
    left: 20px;
}

absolute

绝对定位（absolute）是指元素的位置相对于该元素的最近的具有定位属性（position不为static）的祖先元素进行计算。如果没有祖先元素，则相对于文档的body元素进行定位。

• 通过top、bottom、left、right属性可以确定元素在页面中的精确位置。

• 元素脱离了文档流，不占据文档流中的位置，其他元素会自动填充脱离文档流的元素的位置。在不添加定位属性的元素尤其重要。元素的盒体宽度缩小为自身宽度。

div {
    position: absolute;
    top: 10px;
    left: 20px;
}

fixed

固定定位（fixed）是元素的位置相对于浏览器窗口进行计算。固定定位与绝对定位非常相似，但是相对于网页而言，固定定位的元素位置不受滚动条的影响。无论页面向上或者向下滚动，固定定位的元素仍然处于原来的位置。

• 通过top、bottom、left、right属性可以确定元素在窗口中的精确位置。

• 元素脱离了文档流，不占据文档流中的位置，其他元素会自动填充脱离文档流的元素的位置。在不添加定位属性的元素尤其重要。元素的盒体宽度缩小为自身宽度。

div {
    position: fixed;
    top: 10px;
    left: 20px;
}

使用场景

因为定位涉及到元素位置的调整，使用灵活性较大，但同时也会带来使用上的复杂度。如何合理选择定位方式，需要根据实际情况进行选择。

• 要使元素内容脱离文档流，使用absolute或fixed。

• 要微调元素在文档流中的位置，使用relative。

• 要使元素固定在页面上，不随页面滚动而移动，使用fixed。

下面是一些示例：

/* relative示例 */
.container {
    position: relative;
    width: 400px;
    height: 300px;
    border: 1px solid #000;
}
.box {
    position: relative;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    background-color: red;
}

/* absolute示例 */
.container {
    position: relative;
    width: 400px;
    height: 300px;
    border: 1px solid #000;
}
.box {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    background-color: red;
}

/* fixed示例 */
.container {
    width: 100%;
    height: 500px;
    border: 1px solid #000;
}
.box {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 50px;
    height: 50px;
    background-color: red;
}

以上就是关于position属性的详细介绍，希望对你理解和使用CSS布局有所帮助。