Ширина абсолютно расположенных элементов не соблюдается

Question

Я хочу сделать некоторую замену текста, когда одна подстрока исчезает, а другая исчезает. Я думаю, что нужно «перекрывать» промежутки и оживлять opacity.

    <p>
      This is the 
      <span style="position: relative;">
        <span style="position: absolute;">wrong</span>
        <span style="position: absolute;" class="hidden">correct</span>
      </span> 
      answer.
    </p>

Я ожидал, что wrong и correct будут перекрываться, а окружающий элемент <span> будет иметь ширину самого длинного слова. Но окружающий элемент получает ширину 0, в результате чего слово answer также перекрывается.

Есть ли обходной путь, учитывающий ширину абсолютно расположенных элементов? Предположим, что они имеют динамический контент, поэтому вы не можете быть уверены, какой из них будет самым длинным.

edit: После некоторого осмотра это выглядит так: диапазон с position: relative не имеет содержимого, поэтому он не будет иметь ширины. Внутренние пролеты автоматически станут блоками, потому что они расположены абсолютно. Вы могли бы дать им ширину, но это не повлияет на внешний промежуток. Я думаю.

Answer 1

Использование position: absolute удаляет элемент из обычного потока документов. Элемент больше не будет влиять на расположение других элементов в документе. Элемент не займет вертикальное или горизонтальное пространство, которое вы видите, когда текстовый узел answer перекрывается абсолютно позиционированными элементами.

Одним из решений этой проблемы было бы использование position: absolute только на самом коротком из двух span с. Затем вы можете скрыть или показать правильный span, изменив непрозрачность элементов:

var el = document.querySelector('.result-wrap');

document.querySelector('button').addEventListener('click', function() {
    el.classList.toggle('show-negative');
    el.classList.toggle('show-positive');
});

.result-wrap {
  position: relative;
}

.result {
  opacity: 0;
  transition: all 1s ease;
}

.result-negative {
  position: absolute;
  left: 0;
}

.show-negative .result-negative,
.show-positive .result-positive{
  opacity: 1;
}

.show-negative .result-positive
.show-positive .result-negative{
  opacity: 0;
}

<p>
  This is the 
  <span class="result-wrap show-positive">
    <span class="result result-negative">wrong</span>
    <span class="result result-positive">correct</span>
  </span> 
  answer.
</p>

<button type="button">
Toggle result
</button>

Answer 2

Сделать интервал контейнера встроенным, гибким, столбцом направления

Это сложит вертикально внутренние промежутки

затем сделайте эти высоты 0, чтобы они занимали одинаковое вертикальное положение:

.container {
    display: inline-flex;
    flex-direction: column;
}

.item {
    height: 0px;
}

<p>
      This is the 
      <span class="container">
        <span class="item">wrong</span>
        <span class="item hidden">correct long</span>
      </span> 
      answer.
    </p>

Answer 3

Обновлен фрагмент

var el = document.querySelector('.wrapper'),
correct = document.querySelector('.correct'),
wrong = document.querySelector('.wrong'),
cW = correct.offsetWidth,
wW = wrong.offsetWidth,
btn = document.querySelector('.btn')

correct.style.position = "absolute";
correct.style.top = 0;
wrong.style.position = "absolute";
wrong.style.top = 0;

function checklonger () {
if (el.classList.contains('show-correct')) {
     el.style.width= cW + 'px';
}
else {
     el.style.width= wW + 'px';
}
}
checklonger ();

btn.addEventListener('click', function() {
   el.classList.toggle('show-correct');
   el.classList.toggle('show-wrong');
   checklonger();
});

p {
  position:relative;
}
.wrapper {
  display: inline-block;
  transition: all 1s ease;

}
.correct, .wrong {
  opacity:0;
  transition: all 1s ease;
}
.show-correct .correct, .show-wrong .wrong  {
    opacity:1;
}

<p>
      This is the
      <span class='wrapper show-correct'>
        <span class="correct">correct</span>
        <span class="wrong">wrong </span>

      </span> 
    answer
    </p>

<button class="btn">toggle</button>