静态定位 static

静态定位(static)是CSS定位的默认值。
当一个元素的position设置为static时:

1. 元素正常出现在文档流中,按普通布局方式定位。
2. 无法使用offset属性(top、right、bottom、left)来定义偏移。这些属性对static无效。
3. 可以理解为“非定位”或“普通定位”。元素按正常流布局方式显示,没有特殊定位 offset。
4. 其他元素的定位不会影响其位置。相对定位、绝对定位或固定定位的元素不会对其造成影响。
5. 特点是标准流中默认的布局方式,位置不受影响,没有偏移量。
   示例:

html
<div class="static">static div</div>
<div class="relative">relative div</div> 
<div class="absolute">absolute div</div>

css
.static {
  position: static;
  background: #ff0;
}
.relative {
  position: relative;
  top: 20px;
  background: #f0f;
}
.absolute {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #0ff; 
}

结果:
static div
relative div
absolute div
.static元素没有偏移,正常在文档流中显示。
.relative元素相对定位,向下偏移20px。
.absolute元素绝对定位,位于视口右下角。
可以看出,static元素完全不受其他定位元素的影响,按默认方式进行布局。

所以,当不需要对元素进行特殊定位或偏移,同时也不想受其他定位元素影响时,设置position: static是一个很好的选择。它代表着默认的正常布局方式。
通过对比其他定位值,可以加深对静态定位的理解,知道它代表了默认布局,不可偏移且独立于其他定位的一种特性。

总之,要记住:static就是普通流中的默认定位,不偏移且其他定位不会影响它。