CSS属性详解——position:relative

本文介绍: CSS中的相对定位 relative 定位是一种定位方式，与绝对定位 ab solut e 定位不同的是，相对定位是根据元素在正常页面流中的位置来定位。相对定位使元素相对于其原始位置上下左右移动。这个过程并不会使元素脱离文档流。

CSS中的相对定位relative定位是一种定位方式，与绝对定位ab solut e定位不同的是，相对定位是根据元素在正常页面流中的位置来定位。相对定位使元素相对于其原始位置上下左右移动。这个过程并不会使元素脱离文档流。

在CSS中使用相对定位relative定位需要使用 position 属性，值为 relative。然后，使用 top、left、bot t o m、right这四个属性从初始位置移动元素。与绝对定位不同的是，相对定位会影响元素的其他兄弟元素，而且相对定位不影响元素在文档流中的位置，只是在文档流中移动了它的位置。

下面是一个使用CSS相对定位relative定位的例子。这个例子是创建一个鼠标悬停在元素上方时，显示一个隐藏的提示框。

&lt;!DOCTYPE html&gt;
<html&gt;
<head>
  <title>使用CSS相对定位relative定位</title>
  <style>
    /* 定义提示框 */
    .tooltip {
      display: none;
      position: relative;
      background-color: #4CAF50;
      color: white;
      padding: 5px;
      border-radius: 5px;
      font-size: 12px;
      top: -20px;
      left: 10px;
    }
    
    /* 鼠标悬停时显示提示框 */
    .tooltip:hover + .tooltip {
      display: block;
    }
  </style>
</head>
<body>
  <p>
    鼠标移到下面这个<span class="tooltip">提示框</span>之上时，会显示一个隐藏的提示框。
  </p>
</body>
</html>