CSS定位术语的艺术：理解absolute和relative的精妙之处

2024-01-12 10:29:04

了解CSS定位属性绝对和相对是掌握前端开发的关键。对于初学者来说，区分这两者以及如何在实际项目中实施它们可能会令人望而生畏。这篇文章将指导您了解absolute和relative定位之间的差异，并提供清晰的示例，让您轻松理解。

绝对定位：脱离文档流的自由

绝对定位 属性将元素从正常的文档流中移除，允许您在页面上的任何位置精确放置元素。它使用top、bottom、left和right属性来指定元素相对于其最近定位的祖先元素的位置。

想象一下一个漂浮在页面上的弹出窗口，不受周围文本影响。您可以使用绝对定位来实现此效果。其语法如下：

element {
  position: absolute;
  top: 10px;
  left: 20px;
}

相对定位：相对文档流的微妙调整

相对定位 属性将元素保持在文档流中，但允许您相对于其原始位置进行偏移。它使用top、bottom、left和right属性来指定元素应相对于其自身当前位置移动的距离。

相对定位非常适合对元素进行微调，而不会将其从文档流中移除。例如，您可以将一段文本向右移动以适应图像。其语法如下：

element {
  position: relative;
  right: 50px;
}

绝对定位与相对定位：差异一览

特性	绝对定位	相对定位
文档流	脱离文档流	保留在文档流中
相对位置	相对于最近定位的祖先元素	相对于自身当前位置
用例	弹出窗口、工具提示、固定元素	微调元素位置、调整文本对齐

实践示例：交互式按钮和悬浮提示

交互式按钮： 使用绝对定位创建当鼠标悬停在按钮上时出现的交互式按钮。

<button id="my-button">悬停我</button>

<style>
  #my-button {
    position: relative;
  }
  
  #my-button:hover .tooltip {
    position: absolute;
    top: -10px;
    left: 100%;
    padding: 5px;
    background: #ccc;
  }
</style>

悬浮提示： 使用相对定位在元素上添加悬浮提示。

<p id="my-paragraph">将鼠标悬停在此文本上</p>

<style>
  #my-paragraph {
    position: relative;
  }
  
  #my-paragraph:hover .tooltip {
    position: relative;
    left: 10px;
    padding: 5px;
    background: #ccc;
  }
</style>