Question

我在包装div中有一个很棒的字体图标。包装div的位置是绝对的。字体真棒图标还具有绝对位置。包装div必须具有绝对的位置，因为我要将其放置在标题标签的底部边缘（不包括在提供的代码中）。

当我从真棒字体图标中删除“ position：absolute”时，该图标不再适合父容器。我对为什么会这样感到困惑。图标的父级是'.wrapper'。因此，通过绝对放置字体超棒的图标，我应该能够将其准确地移动到希望放入“ .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

这是预期的行为。

该元素已从常规文档流中删除，并且在页面布局中没有为该元素创建空间。相对于其最接近的祖先进行了定位；否则，它相对于初始包含块放置。它的最终位置由top，right，bottom和left的值确定。 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

Answer 2

具有position:absolute的元素相对于具有CSS属性position: absolute或position: relative的父元素。

在您的情况下，<i class="fas fa-angle-down"></i>的最近祖先是<div class="wrapper">。因此，您仍然需要将position:absolute应用于图标类

字体真棒图标移动到其父容器的外部，位置为：绝对

2 个答案: