为什么navbar类设为position:relative时::before伪元素表现不同？

这个问题的核心是CSS绝对定位的包含块（定位上下文）规则：

• 给元素设置position: absolute后，它的百分比宽高、偏移值都会参照「最近的、position属性不为static的父级元素」计算；如果找不到这样的父级，就默认参照根元素<html>（也就是整个视口）计算。
• 伪元素::before/::after默认属于宿主元素的子元素，同样遵循上述规则。

接下来对应两种场景解释：

场景1：.navbar未设置position: relative #

此时.navbar的position是默认值static，不属于可作为定位上下文的元素。你给.navbar::before设置了绝对定位，找不到符合要求的父级定位上下文，所以width: 100%、height: 100%是参照整个视口的宽高计算，最终黑色背景会铺满整个页面，和导航栏本身的尺寸无关。
对应代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        color: white;
    }
    /* .navbar{
       position:relative;
    } */
    .navbar::before{
        content:"";
        background-color: black;
        position:absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
    }
</style>
<body>
    <nav class="navbar">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, asperiores.
    </nav>
</body>
</html>

场景2：.navbar设置了position: relative #

此时.navbar的position属性不再是默认的static，变成了它内部子元素的定位上下文。.navbar::before的百分比宽高就会参照.navbar本身的实际宽高计算，所以黑色背景的尺寸刚好和导航栏的尺寸完全匹配。
对应代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        color: white;
    }
    .navbar{
       position:relative;
    }
    .navbar::before{
        content:"";
        background-color: black;
        position:absolute;
        height: 100%;
        width: 100%;
        z-index: -1;
    }
</style>
<body>
    <nav class="navbar">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, asperiores.
    </nav>
</body>
</html>

内容的提问来源于stack exchange，提问作者Parth Yadav