Значок Font Awesome выходит за пределы родительского контейнера с позицией: absolute

Question

У меня есть значок шрифта в оболочке div.Div-обертка имеет абсолютное позиционирование.Шрифтовая иконка также имеет абсолютную позицию.У div-обертки должно быть абсолютное позиционирование, потому что я собираюсь поместить его в нижний край моего тега заголовка (не входит в предоставленный код).

Когда я убираю «position: absolute» из шрифтазначок, значок больше не помещается в родительский контейнер.Я запутался в том, почему это происходит.Родителем значка является «.wrapper». Таким образом, благодаря абсолютно точному расположению шрифта, я смогу переместить его точно туда, куда я хочу, чтобы он находился внутри «.wrapper», но вместо этого он выходит за пределы класса-оболочки.border.

Здесь значок имеет положение: абсолютное:

<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