css中position属性(absolute|relative|static|fixed)概述及应用

CSS中Position属性概述及应用

在CSS中，position属性可以设置元素相对于其父元素或浏览器窗口的位置，具有四个可选值：static、relative、absolute、fixed。

static

position: static;是默认值，表示元素遵循正常的文档流排列，不受top、bottom、left、right等属性的影响。这种情况下，元素的z-index值也无效。

示例：

<div>
  <p>这是一个普通的段落。</p>
</div>

div {
  border: 1px solid red;
}

在以上的示例中，p元素将遵循默认的正常文档流排列，并且被包裹在红色的边框div元素内。

relative

position: relative;表示元素相对于它正常的位置偏移，并且可以通过top、bottom、left、right属性来调整位置。这种情况下，z-index值有效。

示例：

<div>
  <p>这是一个普通的段落。</p>
  <p class="relative">这是一个相对定位的段落。</p>
</div>

div {
  border: 1px solid red;
}

.relative {
  position: relative;
  left: 30px;
  top: 50px;
  z-index: 1;
}

在以上的示例中，p.relative元素相对于它正常的位置左偏移了30px，上偏移了50px，它的z-index值为1，元素被包裹在红色的边框div元素内。

absolute

position: absolute;表示元素定位相对于离它最近的具有定位的父元素，如果没有则相对于文档根元素。可以通过top、bottom、left、right属性来调整位置。这种情况下，z-index值有效。

示例：

<div>
  <p>这是一个普通的段落。</p>
  <div class="relative">
    <p class="absolute">这是一个绝对定位的段落。</p>
  </div>
</div>

div {
  border: 1px solid red;
  position: relative;
}

.relative {
  border: 1px solid blue;
  height: 100px;
  position: relative;
}

.absolute {
  position: absolute;
  left: 30px;
  top: 50px;
  z-index: 1;
}

在以上的示例中，p.absolute元素相对于最近的具有定位的祖先元素，即class为relative的div元素定位，它的位置偏移为左30px、上50px，它的z-index值为1，元素被包裹在蓝色边框的div元素内。

fixed

position: fixed;表示元素定位相对于浏览器窗口，可以通过top、bottom、left、right属性来调整位置。这种情况下，z-index值有效。

示例：

<div>
  <p>这是一个普通的段落。</p>
  <p class="fixed">这是一个固定定位的段落。</p>
</div>

.fixed {
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 1;
}

在以上的示例中，p.fixed元素定位相对于浏览器窗口，它的位置偏移为底部0px、右侧0px，它的z-index值为1，元素被包裹在默认的div元素内。

总结

• position: static; 是默认值，表示遵循正常文档排列。
• position: relative; 表示元素相对于它正常的位置偏移，并可以通过top、bottom、left、right属性来调整位置。
• position: absolute; 表示元素定位相对于离它最近的具有定位的父元素，如果没有则相对于文档根元素。
• position: fixed; 表示元素定位相对于浏览器窗口。

在实际开发过程中，我们会使用到众多定位技巧，在结合实际应用场景时，可以参考以上四种定位方式的特点和使用场景，找到最优的解决方案。