CSS定位属性小记，深入浅出学定位

前端

2023-10-02 22:55:33

CSS 定位属性 position 用于指定一个元素在文档中的定位方式。它是 Web 开发中一个非常重要的概念，可以帮助您创建出复杂且响应式的网页布局。

CSS 定位属性有 5 个可选值：

static：默认值。元素将根据正常流进行定位。
relative：元素相对于其正常位置进行定位。
absolute：元素相对于其最近的已定位祖先元素进行定位。如果元素没有已定位的祖先元素，则相对于浏览器窗口进行定位。
fixed：元素相对于浏览器窗口进行定位。
sticky：元素相对于其最近的已定位祖先元素进行定位。当元素滚动到其最近的已定位祖先元素的顶部时，它将固定在该位置。

static

static 是 CSS 定位属性的默认值。元素将根据正常流进行定位。这意味着元素将按照它们在 HTML 文档中的顺序一个接一个地排列。

relative

relative 定位元素相对于其正常位置进行定位。这意味着元素将从其正常位置开始，然后根据 top、right、bottom 和 left 属性进行偏移。

absolute

absolute 定位元素相对于其最近的已定位祖先元素进行定位。如果元素没有已定位的祖先元素，则相对于浏览器窗口进行定位。这意味着元素将从其最近的已定位祖先元素的左上角开始，然后根据 top、right、bottom 和 left 属性进行偏移。

fixed

fixed 定位元素相对于浏览器窗口进行定位。这意味着元素将从浏览器窗口的左上角开始，然后根据 top、right、bottom 和 left 属性进行偏移。fixed 定位元素不受其父元素的影响，因此它将始终出现在浏览器窗口的同一位置。

sticky

sticky 定位元素相对于其最近的已定位祖先元素进行定位。当元素滚动到其最近的已定位祖先元素的顶部时，它将固定在该位置。sticky 定位元素在滚动到其最近的已定位祖先元素的底部时，将恢复到其正常位置。

总结

CSS 定位属性是 Web 开发中一个非常重要的概念。通过熟练掌握 CSS 定位属性，您可以创建出复杂且响应式的网页布局。

实例

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: red;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>
</head>
<body>
<div class="container">
  <div class="child"></div>
</div>
</body>
</html>

在这个示例中，.container 元素被定位为 relative。这意味着 .child 元素将相对于 .container 元素进行定位。.child 元素被定位为 absolute。这意味着 .child 元素将从 .container 元素的左上角开始，然后根据 top 和 left 属性进行偏移。结果是，.child 元素出现在 .container 元素的右下角。