字体真棒图标移动其位置与父容器的外面：绝对

Question

我有一个包装DIV的字体真棒图标。该包装div有绝对定位。字体真棒图标也有绝对的位置。该包装的div需要有绝对定位，因为我打算把它放在我的头标签的底部边缘（不是在提供的代码包括在内）。

当我带走“的立场：绝对的”从字体真棒图标，该图标不再适合在父容器。我对为什么会发生混乱。父的图标是“.wrapper”因此，绝对定位的字体真棒图标，我应该可以，我希望它里面去“.wrapper”确切地移动它，而是它是移动之外的包装类的边界。

下面是当该图标的位置是：绝对的：

<header>
    <div class="wrapper">
        <p>Learn more</p>
        <i class="fas fa-angle-down"></i>
    </div>
</header>

CSS：

header .wrapper {
    border: 2px solid red;
    font-size: 400%;
    position: absolute;
    bottom: 0;
    left: 50%;
}

header .wrapper i {
    position: absolute;
}

header .wrapper p {
    align-content: center;
    font-size: 30%;
}

[codepen] https://codepen.io/anon/pen/yZXMzg?editors=1100

下面是当图标没有立场：绝对的：

header .wrapper {
    border: 2px solid red;
    font-size: 400%;
    position: absolute;
    bottom: 0;
    left: 50%;
}

header .wrapper i {
}

header .wrapper p {
    align-content: center;
    font-size: 30%;
}

[codepen] https://codepen.io/anon/pen/zezwKM

Answer 1

这是预期行为。

该元件是从正常的文件流中除去，以及用于在页面布局的元件没有创建空间。它相对于其最接近的定位的祖先定位，如果有的话;否则，它是相对于初始包含块放置。其最终位置由顶部，右，下，左的值来确定。 https://developer.mozilla.org/en-US/docs/Web/CSS/position

也就是说，当你的图标是position: absolute，父容器的大小本身如果图标是不存在（严格地说，图标不占用空间）。因此，尽管你可以使用position: absolute你只需要手动添加间距（例如使用填充父）为它添加了足够的空间确实定位。

例如：https://codepen.io/anon/pen/jdwmZz?editors=1100

根据您的需求，这可能更容易只是position: static到FontAwesome元（我也把i元素p内，以避免断线问题）。 https://codepen.io/anon/pen/Odgmvm?editors=1100