本文共 1690 字，大约阅读时间需要 5 分钟。
position属性是CSS中最重要的布局属性之一，默认值为static。它决定了元素的定位方式，进而影响页面的整体布局。根据不同的值，元素会以不同的方式定位，甚至影响其他元素的布局。以下是各值的具体说明：
static是position属性的默认值。当position为static时，元素的布局完全由HTML的自然流动和父元素的布局决定。
此时，top、bottom、left、right等属性完全失效，元素不会相对于其他元素或窗口移动。静态定位的元素不会影响其他元素的布局，这也是默认情况下最简单的布局方式。
relative和absolute是相对定位的一种，它们的区别在于基准点的不同。relative的基准点是元素自身原来的位置，即static定位的位置。而absolute的基准点则是相对于父元素的位置（如果父元素是static，则继续查找上层非static元素）。两者都可以搭配top、bottom、left、right四个属性中的一个或多个，来设置元素相对于基准点的偏移量。
如果relative或absolute的值不搭配任何top/bottom/left/right属性，则元素会保持在其自然位置，不会产生任何偏移。这与static定位效果相同，但可以更灵活地控制布局。
relative定位的特点是元素会相对于自身原来的位置（即static定位的位置）进行偏移。但与static定位不同的是，relative定位的元素不会影响其他元素的布局，其他元素仍然按照默认流动规则排列。
absolute定位是基于父元素的位置进行定位。如果父元素是static，则会继续向上查找最近的非static元素作为基准点。绝对定位的元素会完全脱离普通流动，占据自己指定的位置，并可能影响其他元素的布局。这种定位方式通常用于创建浮动层或特定的视觉效果。
absolute定位的元素会相对于浏览器窗口或最近的非static父元素的位置进行偏移。这种定位方式非常灵活，但也需要谨慎使用，因为它会改变其他元素的布局。
fixed定位是相对于浏览器窗口 viewport 的位置进行定位。它类似于absolute定位，但基准点是窗口本身。fixed定位的元素会固定在页面的特定位置，其他元素的布局会根据fixed元素的存在而调整。这种定位方式常用于创建固定导航栏或固定的侧边工具栏。
fixed定位的元素不会随页面滚动而移动，它们会始终出现在屏幕的指定位置。这与absolute定位的区别在于，fixed定位的基准点是窗口，而不是父元素。
需要注意的是，fixed定位的元素会影响其他元素的布局。通常情况下，使用fixed定位时，元素会覆盖其他内容，除非有特殊布局方式（如flex布局或position:relative的布局）。
sticky定位是一种混合定位方式，它结合了relative和fixed的特点。sticky定位的元素会在其初始位置（默认为static定位的位置）开始时，像relative定位一样相对于自身位置进行布局。当页面滚动超出该元素的可视范围时，它会像fixed定位一样固定在窗口的位置。
sticky定位的特点是动态固定。它会根据视口的位置和滚动情况，自动调整元素的位置。这种定位方式在页面中创建“粘性”效果非常有用，比如固定头部或尾部内容在页面滚动时保持可见。
注意：sticky定位必须搭配top、bottom、left、right中至少一个属性使用，否则它不会生效。此外，在表格中，sticky属性必须设置在<th>（表头）元素上，而不能设置在<thead>或<tr>（表头行）元素上，因为这些元素本身没有relative定位，所以无法产生sticky效果。
转载地址：http://grxg.baihongyu.com/