css position属性为absolute时其百分值的计算

当CSS的position属性设置为absolute时，元素的位置会相对于其祖先元素中最近设置为定位的元素来进行定位。同时，如何设置元素的top、right、bottom、left属性，也会影响最终定位的位置。

在此基础上，如果我们需要使用百分比设置元素的top、right、bottom、left属性，需要注意以下两点：

1. 父元素需要设置为相对定位

当我们使用百分比设置元素的top、right、bottom、left属性时，百分比是相对于元素所处的最近的相对定位的父元素（如果没有，相对于浏览器窗口）进行计算的。因此，如果元素的父元素没有设置为相对定位，那么即使我们设置了百分比的top、right、bottom、left属性，元素也是无法定位的。

示例1：没有设置相对定位的父元素。

<style>
    .parent {
        width: 300px;
        height: 300px;
    }
    .child {
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        top: 50%;
        left: 50%;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

上述代码中，元素child通过设置position属性为absolute来实现绝对定位，同时设置了top: 50%和left:50%。 但是，父元素没有设置相对定位，元素position属性失效无法定位。

接下来，让我们来设置父元素的position为relative，实现元素相对定位。

<style>
    .parent {
        width: 300px;
        height: 300px;
        position: relative; /* 添加相对定位 */
    }
    .child {
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        top: 50%;
        left: 50%;
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

添加了position为relative后，元素可以正确地定位在父元素的中心位置。

1. 百分比的计算方式

当设置了相对定位的父元素后，我们需要了解百分比的计算方式，才能正确地设置元素的相对位置。

例如，使用top: 50%时，实际上表示元素的顶部相对于父元素顶部距离的50%。

百分比的计算方式如下：

• top 和 bottom 百分比是相对于父元素高度计算的
• left 和 right 百分比是相对于父元素宽度计算的

示例2：使用top: 50% 和 right: 50% 实现元素定位在父元素的右上角

<style>
    .parent {
        width: 300px;
        height: 300px;
        position: relative;
        background-color: #EEE;
    }
    .child {
        width: 50px;
        height: 50px;
        background-color: red;
        position: absolute;
        top: 50%; /* 元素相对于父元素高度的50% */
        right: 50%; /* 元素相对于父元素宽度的50% */
    }
</style>

<div class="parent">
    <div class="child"></div>
</div>

上述代码中，我们设置元素的top和right属性为50%。这表示元素相对于父元素高度和宽度的50%进行定位。最终实现元素定位在父元素的右上角。

通过这两个示例，我们可以更好地了解使用百分比设置元素在绝对位置定位时的计算方式和规则，以更好地实现元素的定位效果。