CSS中的position属性：绝对与相对定位

欢迎来到今天的CSS讲座！

大家好，欢迎来到今天的CSS讲座！今天我们要聊的是CSS中非常重要的一个属性——position。这个属性就像是给你的HTML元素安上了“导航仪”，帮助它们在页面上找到正确的位置。我们重点会讨论两种常见的定位方式：相对定位（relative）和绝对定位（absolute）。

什么是position？

首先，position属性决定了元素在页面中的定位方式。它有五个主要的值：

• static（默认值）
• relative
• absolute
• fixed
• sticky

今天我们只聚焦于relative和absolute，其他几个值我们以后再慢慢探讨。

相对定位（relative）

1. 相对定位的基本概念

相对定位的意思是，元素会相对于它原本的位置进行偏移。换句话说，元素仍然占据着它原来的空间，只是视觉上看起来移动了。这有点像你在房间里走动，虽然你换了位置，但你站过的地方还是空着的。

2. 代码示例

.relative-box {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: lightblue;
  width: 100px;
  height: 100px;
}

在这个例子中，.relative-box会相对于它原本的位置向下移动20px，向右移动30px。但是请注意，它原来的那个位置仍然是空着的，不会被其他元素占据。

3. 相对定位的特点

• 不脱离文档流：相对定位的元素仍然会影响页面布局，它的原始位置依然存在。
• 偏移量：你可以使用top、right、bottom、left来控制元素的偏移量。
• 层叠上下文：相对定位的元素不会创建新的层叠上下文，除非你给它设置了z-index。

绝对定位（absolute）

1. 绝对定位的基本概念

绝对定位的元素会完全脱离文档流，不再占据任何空间。它会相对于最近的已定位的父元素进行定位。如果没有已定位的父元素，那么它会相对于浏览器窗口进行定位。这就像你从房间里搬到了外面，房间里的空间就空出来了。

2. 代码示例

.parent {
  position: relative;
  width: 300px;
  height: 200px;
  background-color: lightcoral;
}

.absolute-box {
  position: absolute;
  top: 50px;
  left: 50px;
  background-color: lightgreen;
  width: 100px;
  height: 100px;
}

在这个例子中，.absolute-box会相对于它的父元素.parent进行定位，距离父元素的顶部50px，左边50px。注意，.parent必须有一个position: relative，否则.absolute-box会相对于浏览器窗口进行定位。

3. 绝对定位的特点

• 脱离文档流：绝对定位的元素不再影响页面布局，它不会占据任何空间。
• 相对于最近的已定位父元素：如果父元素没有设置position属性（除了static），那么绝对定位的元素会相对于浏览器窗口进行定位。
• 层叠上下文：绝对定位的元素会创建一个新的层叠上下文，尤其是当你设置了z-index时。

相对定位 vs 绝对定位：对比表格

特性	相对定位（relative）	绝对定位（absolute）
是否脱离文档流	否，仍然占据原有空间	是，不占据任何空间
定位基准	原始位置	最近的已定位父元素或浏览器窗口
影响布局	是，元素仍然会影响其他元素的布局	否，元素不会影响其他元素的布局
层叠上下文	不会创建新的层叠上下文（除非设置了z-index）	会创建新的层叠上下文（尤其是设置了z-index）

实战演练：如何选择使用相对定位还是绝对定位？

现在你可能会问，什么时候该用相对定位，什么时候该用绝对定位呢？其实这取决于你的具体需求。

• 相对定位适合用于微调元素的位置，而不想破坏页面的整体布局。比如，你想让一个按钮稍微偏离一点，或者想让一段文字稍微靠左或靠右一些。

• 绝对定位则更适合用于将元素固定在某个特定的位置，而不影响其他元素的布局。比如，你想把一个悬浮按钮固定在页面的右下角，或者想把一个菜单栏固定在页面的顶部。

国外技术文档引用

在W3C规范中，position属性的定义非常明确。相对定位（relative）的元素会在其正常位置的基础上进行偏移，而绝对定位（absolute）的元素则会脱离文档流，并根据最近的已定位父元素进行定位。如果找不到已定位的父元素，则会相对于视口（viewport）进行定位。

此外，MDN Web Docs也提到了，绝对定位的元素会创建一个新的块级格式化上下文（block formatting context），这意味着它内部的元素会重新计算布局，而不会受到外部元素的影响。

总结

今天我们学习了CSS中的position属性，特别是相对定位和绝对定位的区别和应用场景。相对定位适合用于微调元素的位置，而绝对定位则适合用于将元素固定在特定位置。希望这些知识能帮助你在未来的项目中更好地掌控页面布局。

如果你还有任何疑问，欢迎在评论区留言！下次见，祝你编码愉快！ ?