[分享]css中4个定位各自特点

在CSS中，我们通常使用4种不同的定位来控制元素的位置和布局。这些定位分别是：1. 静态定位(static) 2. 相对定位(relative) 3. 绝对定位(absolute) 4. 固定定位(f...

在CSS中，我们通常使用4种不同的定位来控制元素的位置和布局。这些定位分别是：

1. 静态定位(static)<br>
2. 相对定位(relative)<br>
3. 绝对定位(absolute)<br>
4. 固定定位(fixed)<br>

静态定位(static)
静态定位是默认的定位方式，当我们不对元素进行设置时，它就是静态定位。静态定位的元素按照HTML文档流的顺序显示，不受到其他元素的影响，并且它无法通过top、bottom、right、left来调整它的位置。因此，我们很少使用它来布局网站。

相对定位(relative)
相对定位是一种相对于它本来所在的位置进行定位的方式。该元素会在它原本应该出现的位置上继续占据空间，而不是覆盖其他元素。在相对定位中，我们可以使用top、bottom、right、left来调整这个位置。相对定位不会使得元素脱离文档流，因此该元素的其他内容仍然按照正常的方式进行排列。

绝对定位(absolute)
绝对定位是一种元素脱离文档流并相对于它最近的非static元素进行定位的方式。通常，我们对父元素设置相对定位，这样就可以控制子元素的位置和布局。在绝对定位中，我们可以使用top、bottom、right、left来调整这个位置。绝对定位会使得元素脱离文档流，因此其他元素不会再占用该元素的空间，容易造成布局上的混乱，使用时需要谨慎。

固定定位(fixed)
固定定位是一种相对于浏览器窗口进行定位的方式。在页面滚动时，该元素会保持不变，保持在屏幕的固定位置。使用fixed，我们可以在屏幕上创建一些特殊的效果，如固定菜单栏等。在固定定位中，我们同样可以使用top、bottom、right、left来调整位置。与绝对定位类似，固定定位也会使得元素脱离文档流，因此其他元素不会再占用其空间。