CSS 定位属性用于控制元素的布局位置。常用的定位方式包括 static、relative、absolute、fixed 和 sticky。

1. static（默认定位）

元素按照正常的文档流排列，top、right、bottom、left 和 z-index 属性无效。

div {
  position: static;
}

2. relative（相对定位）

元素相对于其正常位置进行定位，不影响其他元素布局。

div {
  position: relative;
  top: 10px;
  left: 20px;
}

3. absolute（绝对定位）

元素相对于最近的非 static 定位的祖先元素定位，若无则相对于 <body>。

div {
  position: absolute;
  top: 50px;
  left: 100px;
}

4. fixed（固定定位）

元素相对于视口定位，不随页面滚动移动。

div {
  position: fixed;
  top: 0;
  right: 0;
}

5. sticky（粘性定位）

元素根据滚动位置在 relative 和 fixed 之间切换。

div {
  position: sticky;
  top: 0;
}

案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS Positioning</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      margin: 10px;
      text-align: center;
      line-height: 100px;
    }
    .relative {
      position: relative;
      top: 20px;
      left: 30px;
    }
    .absolute {
      position: absolute;
      top: 50px;
      left: 150px;
    }
    .fixed {
      position: fixed;
      top: 10px;
      right: 10px;
    }
    .sticky {
      position: sticky;
      top: 0;
      background-color: lightcoral;
    }
  </style>
</head>
<body>
  <div class="box">Static</div>
  <div class="box relative">Relative</div>
  <div class="box absolute">Absolute</div>
  <div class="box fixed">Fixed</div>
  <div style="height: 1000px;">
    <div class="box sticky">Sticky</div>
  </div>
</body>
</html>

总结

  • static：默认定位，元素按正常文档流排列。

  • relative：相对于正常位置定位。

  • absolute：相对于最近的非 static 祖先元素定位。

  • fixed：相对于视口定位。

  • sticky：根据滚动位置切换 relative 和 fixed。

本篇文章内容来源于：CSS定位详细说明以及案例