您现在的位置是：网站首页 > position属性的五种取值文章详情

position属性的五种取值

陈川【 CSS 】 19474人已围观 1988字

在CSS中，position属性用于控制元素的定位方式，直接影响布局的灵活性和复杂性。它的五种取值分别对应不同的定位行为，从静态定位到绝对定位，每种方式都有其独特的应用场景和注意事项。

static

static是position属性的默认值。元素按照正常的文档流排列，不受top、right、bottom、left和z-index属性的影响。这种定位方式常用于不需要特殊定位的场景。

<div style="position: static; width: 100px; height: 100px; background: red;"></div>
<div style="width: 100px; height: 100px; background: blue;"></div>

上面的代码中，红色和蓝色的div会按照文档流顺序从上到下排列，position: static对布局没有产生任何额外影响。

relative

relative定位的元素仍然占据文档流中的原始位置，但可以通过top、right、bottom和left属性进行偏移。这种偏移不会影响其他元素的位置。

<div style="position: relative; top: 20px; left: 30px; width: 100px; height: 100px; background: green;"></div>
<div style="width: 100px; height: 100px; background: yellow;"></div>

在这个例子中，绿色的div会相对于其原始位置向下偏移20px，向右偏移30px，而黄色的div仍然保持在绿色div的原始位置下方，不会因为绿色div的偏移而移动。

absolute

absolute定位的元素会脱离文档流，相对于最近的非static定位的祖先元素进行定位。如果没有这样的祖先元素，则相对于<html>元素定位。

<div style="position: relative; width: 200px; height: 200px; background: lightgray;">
  <div style="position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background: orange;"></div>
</div>
<div style="width: 100px; height: 100px; background: pink;"></div>

这里，橙色的div相对于灰色容器定位，而粉色的div则紧跟在灰色容器之后，因为橙色div已经脱离了文档流。

fixed

fixed定位的元素同样脱离文档流，但它是相对于浏览器视口进行定位的。即使页面滚动，元素的位置也不会改变。

<div style="position: fixed; top: 10px; right: 10px; width: 100px; height: 50px; background: purple; color: white;">
  固定定位
</div>
<div style="height: 2000px;"></div>

紫色的div会始终固定在视口的右上角，即使页面滚动，它也不会移动。这种特性常用于导航栏或悬浮按钮。

sticky

sticky定位是relative和fixed的结合体。元素在跨越特定阈值前为相对定位，之后为固定定位。必须指定至少一个top、right、bottom或left属性才能生效。

<div style="height: 200px; overflow-y: scroll;">
  <div style="position: sticky; top: 0; background: cyan; padding: 10px;">
    粘性定位头部
  </div>
  <div style="height: 800px; background: lightblue;"></div>
</div>

在这个例子中，当用户向下滚动时，青色头部会在到达视口顶部时固定住，直到滚动容器滚动到它的底部。这种特性非常适合表格头部或分段标题。

上一篇：盒模型的浏览器兼容问题

下一篇：相对定位的特点与应用