position属性（探究position属性）

探究position属性

什么是position属性？

在HTML和CSS中，position属性用于控制元素在文档中的定位方式。使用position属性，我们可以改变元素在文档中的位置，使其脱离文档流或者相对于文档流中的其他元素进行定位。在CSS中，position属性有四个取值：static、relative、absolute和fixed。

static定位

static是position属性的默认值。当一个元素被设置为static定位时，它会根据文档流的布局进行位置排列。也就是说，它在页面中所占的位置会根据文档流自动决定，我们无法通过top、bottom、left和right属性来修改它的位置。static定位的元素不能通过z-index属性调整其在层叠元素堆叠顺序中的位置。

relative定位

relative定位是相对于元素本身在文档流中的位置进行定位。当一个元素被设置为relative定位时，我们可以通过top、bottom、left和right属性来调整其在文档流中的位置。这些属性值可以是百分比，也可以是固定数值。相对定位不会使元素脱离文档流，所占的空间依然会保留。

另外，设置了relative定位的元素，还可以通过z-index属性来调整元素在层叠元素堆叠顺序中的位置。z-index属性的值越大，元素在层叠元素堆叠顺序中的位置越高。

absolute定位

absolute定位是相对于其最近的已定位（即position属性值不为static）的父元素进行定位。如果没有已定位的父元素，则元素相对于文档浏览器进行定位。当一个元素被设置为absolute定位时，我们可以通过设置top、bottom、left和right属性来改变其在文档中的位置。与相对定位不同的是，absolute定位会使元素脱离文档流，其位置的改变不会对其他元素造成影响。

与relative定位一样，设置了absolute定位的元素也可以通过z-index属性来调整其在层叠元素堆叠顺序中的位置。

fixed定位

fixed定位是相对于浏览器窗口进行定位的。当一个元素被设置为fixed定位时，其位置在页面滚动时不会改变。我们可以通过设置top、bottom、left和right属性来调整其在页面中的位置。和absolute定位一样，fixed定位使元素脱离文档流，但不受父元素的影响。

固定定位的一个常见应用场景是网页导航栏。通过设置导航栏的position为fixed，可以让导航栏一直显示在浏览器窗口的某个位置，无论页面滚动到哪个位置。

总结

position属性提供了灵活的定位方式，可以使元素按照我们的要求进行位置调整。根据使用场景的不同，我们可以选择使用static、relative、absolute或fixed定位。需要注意的是，相对定位和绝对定位会使元素脱离文档流，所以在使用时需要注意页面的布局和其他元素的位置。

根据不同的需求，合理运用position属性可以为网页布局和交互带来更多的可能性和创造性。