CSS 绝对定位 position:absolute

news2024/11/16 3:33:41

什么是CSS绝对定位absolute定位？

绝对定位absolute定位是CSS中的一种定位方式，可以将元素精确定位到一个确定的点，这与元素在文档流上的自然位置无关。相比起其他定位方式，绝对定位很灵活性，它可以将元素脱离文档流，使得元素的位置不受页面上其他元素的影响。相应地，元素独立悬浮于页面上。

实现过程

在CSS中使用绝对定位absolute定位需要使用position属性，值为absolute。并且，还需要使用top、left、bottom、right这4个属性之一来设置元素的位置。四个属性的设置说明如下：

top：元素上边缘的距离顶部边缘的距离，单位可以是px、em或%；
left：元素左边缘的距离左边沿的距离，单位可以是px、em或%；
bottom：元素下边缘的距离底部边界的距离，单位可以是px、em或%；
right：元素右边缘的距离右边缘的距离，单位可以是px、em或%。

其中，top和left属性决定了元素的左上角的位置，bottom和right属性决定了元素的右下角的位置。需要注意的是，在使用这些属性时，要确保元素的父元素也是定位的，且父元素的position属性不是static。

.login-card{
    position: absolute;
    left: 30%;
    top: 30%;
    width: 450px;
}

代码示例

下面展示一个使用CSS绝对定位absolute定位的例子，这个例子是创建一个浮动在页面右下角的帮助按钮。

<!DOCTYPE html>
<html>
<head>
  <title>使用CSS绝对定位absolute定位</title>
  <style>
    /* 使用CSS样式定义帮助按钮 */
    .help {
      display: block;
      position: absolute;
      bottom: 10px;
      right: 10px;
      background-color: #4CAF50;
      color: white;
      padding: 10px 15px;
      font-size: 16px;
      border-radius: 5px;
      text-align: center;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <a href="#" class="help">帮助</a>
</body>
</html>