前端 position定位

1. static

        默认情况下，元素的position属性值为static。这意味着元素的位置由文档流决定，也就是说，元素的位置取决于该元素在 HTML 中出现的顺序和其他元素的位置。

        注意：设置 "top", "right", "bottom", 或 "left" 属性对 "static" 元素没有任何影响。

2. relative

        相对定位元素的位置是相对于它自己原来的位置进行偏移。可以通过 top, right, bottom, 或 left 属性控制相对偏移的值。相对定位的元素仍然保留原先的空间，其他元素不会根据相对定位的元素进行调整。

        注意：当相对定位的元素发生偏移后，原先在这个元素下面的其他元素会被覆盖，但是从文档流的角度，相对定位的元素仍然在原来的位置上，因此，后面的元素不会根据它进行布局。

3. absolute

绝对定位的元素的位置是相对于它最近的已定位祖先元素（定位属性值为除 "static" 以外的任何值），如果没有祖先元素是已定位的，则相对于文档的 body 元素。绝对定位的元素从文档流中完全删除，其他元素会根据它进行调整。

注意：当绝对定位的元素脱离文档流时，它不再影响其它的元素在布局时的位置，即其它元素布局时不再将其计算在内；同时也可能会对父容器的高度造成影响，导致父容器的高度为 0，需要进行清除浮动处理。

4. fixed

        固定定位的元素的位置是相对于浏览器视窗而不是文档的位置进行偏移。因此，当滚动页面时，固定定位的元素不会发生移动。

        注意：当固定定位的元素脱离文档流时，同样需要进行处理避免对父容器的高度造成影响。

5. sticky

        position: sticky允许元素在滚动过程中表现为 "relative" 或 "fixed" 定位的混合。当元素在滚动到特定位置时，它将根据设置的 "top", "right", "bottom", "left" 值进行定位，直到滚动到另一个设定的位置，然后保持其位置不变。

        注意：粘性定位常用于固定导航栏或者固定的效果，但在一些浏览器中的某些版本可能不支持。

6. inherit

        position: inherit指定元素的 "position" 属性值与其父元素的 "position" 属性值相同。

        注意：通过设置 position: inherit，可以继承父元素的定位属性，可以用于实现一致的布局效果。

---

        上面是介绍了几种position常见的取值，但是在实际运用中position往往不可避免的会结合其他样式的，下面将举例一些使用定位的注意事项：

• absolute, relative, fixed, sticky 的父级元素设置 overflow 属性为 scroll 或 auto

        如果一个元素的父级元素同时设置了 overflow 属性为 scroll 或 auto，并且该子元素的 position属性设置为 absolute, relative, fixed 或 sticky，那么子元素会相对于最近的具有滚动机制的父级元素进行定位。注意：父级元素的 overflow 属性必须是 scroll 或 auto，而不能是 visible（默认值）。

• absolute, fixed 的父级元素设置 transform或perspective或filter 属性

        如果一个被设置为 absolute 或 fixed 定位的元素的父级元素同时设置了 transform或 perspective 或 filter 属性，那么该元素将以其父级元素的坐标系为参考进行定位。

• absolute, fixed 的子级元素设置 transform 属性

        如果一个元素的子级元素同时设置了 transform 属性，并且该元素的position属性设置为 absolute 或 fixed，那么子元素会相对于该元素的坐标系进行定位，不受 transform 属性的影响。

• absolute, fixed 的子级元素设置 contain: strict 属性

        如果一个元素的子级元素同时设置了 contain: strict 属性，并且该元素的position属性设置为 absolute 或 fixed，那么子元素会相对于该元素的坐标系进行定位，而不受任何外部因素的影响。

• 其它注意事项

        1.使用定位属性时要考虑各个元素之间的相对关系和布局效果，避免出现元素重叠、溢出等问题。
        2.定位属性可能会打破元素的文档流，需要注意对父容器的处理，以免对整体布局产生影响。
        3.不同的定位属性对于创建响应式布局和特定效果可以有不同的应用，要根据具体需求灵活选择。