Почему элемент с position: absolute; перепрыгивает на другое место?

Question

[molokhan]

Добрый день.
Есть codepen: https://codepen.io/anon/pen/KJQbOJ

Список, внутри которого в каждом li находится текст + иконка в конце текста. Иконки имеют position: absolute относительно li у которых position: relative (сделано так, потому что на оригинальном сайте в конце списка идет несколько иконок, которые накладываются друг на друга в одном месте). Проблема в том, что при уменьшении размера экрана иконки в какой-то момент неестественно перескакивают в начало списка, что портит всю композицию.



Как можно их заставить оставаться в конце li до тех пор, пока не перенесется хотя бы одно слово в текущем li?
Вот такой вариант не подходит:

Comments

[coderxx]

для чего вам абсолют? не проще ли использовать иконочные шрифты?

[molokhan]

coderxx, в оригинальном сайте там в конце стоит три иконки. Они показываются по очереди и должны находиться на одном месте, т.е. друг на друге

[RAX7]

molokhan, так что ли? https://codepen.io/anon/pen/aXqXKJ

[Виталий Першин]

molokhan, Так оберните иконки в инлайновый блок и позиционируйтесь абсолютно, относительно него

Answer 1

[Quelty]

Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

htmlbook.ru/css/position