[分享]css几种不同定位方式

CSS（Cascading Style Sheets）是一种用于网页设计的样式表语言，用于布局和定位页面元素。其中定位方式共有4种，分别是：1. 静态定位（: static） 这是元素的默认定位方式，...

CSS（Cascading Style Sheets）是一种用于网页设计的样式表语言，用于布局和定位页面元素。其中定位方式共有4种，分别是：

1. 静态定位（position: static）
这是元素的默认定位方式，它按照文档流的方式进行布局，没有特殊的位置或偏移量。使用static定位的元素不受top、bottom、left、right影响，也不能使用z-index属性。

2. 相对定位（position: relative）
相对定位是相对于元素所在位置进行调整。使用top、bottom、left、right属性，可以使元素相对于自身的位置移动，但是其他元素的位置不会受到影响。同时，相对定位的元素可以在z轴上叠加在其他元素之上，使用z-index属性实现。

3. 绝对定位（position: absolute）
绝对定位是相对于最近的已定位（position不为static）的父元素进行定位。如果没有已定位的父元素，它将相对于浏览器窗口进行定位。使用top、bottom、left、right属性，可以将元素放置在指定位置。绝对定位的元素不再占据文档流中的位置，因此可能会对其他元素的位置产生影响。

4. 固定定位（position: fixed）
固定定位是一种特殊的相对定位，只是参考的是浏览器窗口（视口），而不是元素所在位置。固定定位的元素 position 属性的值就是 fixed。固定定位的元素总是会处于文档流之外，不会影响其他元素的位置。使用top、bottom、left、right属性，可以将元素放置在指定位置。固定定位的元素会在滚动时保持在视口内，非常适合用于导航栏等元素。

不同的定位方式可以为我们的页面布局提供更多的灵活性和美观度，同时也需要根据实际需要进行选择使用。