绝对定位中的top属性百分比不生效？这里有解决方案！

前端

2023-03-06 12:46:01

了解 position 的五个定位类型

在网络开发的世界中，控制元素在页面上的位置至关重要。这里，position 属性扮演着至关重要的角色，它允许你灵活地定位元素，创建动态且交互式的布局。本文将深入探讨 position 的五个元素定位类型，帮助你掌握这一关键属性。

position 属性

position 属性定义元素在文档流中的定位类型。它接受以下五个值：

static： 默认值，元素遵循标准的文档流。
relative： 相对于元素在文档流中的原始位置进行定位。
absolute： 相对于父元素或其他具有定位属性的祖先元素进行定位。
fixed： 相对于浏览器窗口进行定位，即使页面滚动也不受影响。
sticky： 一种混合模式，在滚动条未超过其定位元素时表现为 relative，超过时转换为 fixed。

absolute 定位：相对于父元素

absolute 定位是一种相对定位，其中元素的位置由其父元素或具有定位属性的祖先元素决定。设置 position 为 absolute 会将元素从文档流中脱离，并根据其父元素的位置进行定位。

absolute 定位元素使用 top、bottom、left 和 right 属性来设置其相对于父元素的位置。这些属性的值可以是像素值、百分比值或 auto 值。

top 属性百分比不生效的原因

当 position 属性设置为 absolute 时，top 属性的值为百分比时，元素的位置相对于父元素的高度进行定位。但是，如果父元素的高度没有明确设置，top 属性的百分比值将无效。

解决办法

要让 top 属性的百分比值生效，需要确保父元素的高度明确设置。以下是一些方法：

在父元素的 CSS 中明确设置高度：

.parent {
  height: 100vh;
}

使用 JavaScript 获取父元素的高度：

const parentHeight = document.querySelector('.parent').offsetHeight;
const element = document.querySelector('.element');
element.style.top = `${parentHeight * 0.5}px`;

使用 CSS 的 calc() 函数：

.element {
  top: calc(50% - 50px);
}

注意：最后一个方法只适用于父元素的高度为固定值的情况。

sticky 定位：结合 relative 和 fixed

sticky 定位是一种新颖的定位类型，它将 relative 定位和 fixed 定位结合起来。当滚动条未超过其定位元素时，sticky 元素表现得像 relative 定位元素。一旦滚动条超过定位元素，sticky 元素就会转换为 fixed 定位，固定在窗口中。

代码示例

以下示例演示了 position 的五个定位类型：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      position: relative;
      height: 500px;
    }

    .element1 {
      position: static;
      background-color: red;
      width: 100px;
      height: 100px;
    }

    .element2 {
      position: relative;
      background-color: green;
      width: 100px;
      height: 100px;
      top: 50px;
      left: 50px;
    }

    .element3 {
      position: absolute;
      background-color: blue;
      width: 100px;
      height: 100px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .element4 {
      position: fixed;
      background-color: yellow;
      width: 100px;
      height: 100px;
      top: 0;
      right: 0;
    }

    .element5 {
      position: sticky;
      background-color: purple;
      width: 100px;
      height: 100px;
      top: 50px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="element1">Static</div>
    <div class="element2">Relative</div>
    <div class="element3">Absolute</div>
    <div class="element4">Fixed</div>
    <div class="element5">Sticky</div>
  </div>
</body>
</html>