Я пытался создать элемент, не занимающий места, но все же видимый.Я не хочу каких-либо возможных побочных эффектов изменения макета, что означает, что элементы должны выглядеть точно одинаково после того, как они не занимают места.
Почти все методы, предоставляемые Google,или связанные ответы в StackOverflow, используйте абсолютное позиционирование.Проблема заключается в установке position: absolute для встроенного элемента, на самом деле изменяет его поведение макета.
Возьмем этот действительно простой макет, например:
Простой макет абзаца
Мое намерение состоит в том, чтобы синий текст <span> не занимал пространство.Я установил его на position: absolute:
После абсолютного позиционирования
Из изображения видно, что вторая строка <span> не позиционируется изначало линии больше.Он выровнен до начальной позиции первой строки, которая, как я полагаю, должна была гарантировать, что все <span> остается прямоугольной формы.Но несмотря ни на что, макет был изменен после абсолютного позиционирования.
Некоторые предлагают обернуть контейнер относительной компоновки вокруг <span>, но это не сработает - пока one absoluteконтейнер показывается, макет ломается.
Кстати, я собирался выделить несколько слов в параграфе, инвертировав их color и background-color, и мне пришлосьсделайте две идеальные накладывающиеся копии и стилизуйте их отдельно, чтобы сделать это.Я не могу напрямую ввести один <span>, потому что фон из нескольких строк текста всегда накладывается на предыдущие строки, обрезая спуски этих букв, когда line-height маленький, но это еще одна проблема.