Я хотел бы наложить 2 div, чтобы наложить на некоторый текст

Question

jsfiddle: https://jsfiddle.net/h7zq8uj2/9/

У меня есть div, который должен содержать только текст, и еще один, который должен содержать тот же текст, но инкапсулировать слова в span, чтобы сделать наложение. В моем приложении первый div доступен для редактирования, а оверлей используется для выделения слов.

Моя проблема в том, что оба div не наложены. Если я удалю встроенный блок из обертки, то он должен быть выровнен по метке. Я мог бы использовать некоторые настройки, такие как отрицательное левое значение на оверлее, но я бы предпочел более чистое решение. Есть идеи, что вызывает эту проблему?

По-видимому, я не могу опубликовать ссылку jsfiddle без кода, поэтому вот css:

label {
  font-family: Verdana;
  font-weight: bold;
}

.wrap {
  display: inline-block;
  position: relative;
  max-width: 100%;
}

.content, .overlay {
  display: inline-block;
  box-sizing: content-box;
  min-width: 200px;
  font-family: Verdana;
  font-size: 1em;
  line-height: 1.2em;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: none;
  padding: 6px;
  margin: 3px 9px 0 9px;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  color: red;
}

span {
  display: inline-flex;
  border-radius: 4px;
}

РЕДАКТИРОВАТЬ: Собака в красном должна быть наложена с собакой в ​​черном, на практике цвет текста наложения прозрачен, а цветной интервал накладывается на слова, чтобы выделить их.

РЕДАКТИРОВАТЬ 2: Работает так, как задумано на Firefox, проблема появляется в Google chrome.

Answer 1

Вы можете добавить width: 100%; к .content, .overlay { Fiddle здесь

label {
  font-family: Verdana;
  font-weight: bold;
}

.wrap {
  display: inline-block;
  position: relative;
  max-width: calc(100% - 32px);
}

.content, .overlay {
  display: inline-block;
  box-sizing: content-box;
  min-width: 200px;
  font-family: Verdana;
  font-size: 1em;
  line-height: 1.2em;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: none;
  padding: 6px;
  margin: 3px 9px 0 9px;
  width: 100%; /* only added this line */
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  color: red;
}

span {
  border-radius: 4px;
}

<label>Some text</label><div class="wrap">
  <div class="content">
    The quick brown fox jumps over the lazy dog.
   </div>
  <div class="overlay"><span style="background-color: rgba(0,150,136,0.26588765477209436)">The</span> <span style="background-color: rgba(0,150,136,0.05178760621941473)">quick</span> <span style="background-color: rgba(0,150,136,0.005655135822367268)">brown</span> <span style="background-color: rgba(0,150,136,0.6454548184780486)">fox</span> <span style="background-color: rgba(0,150,136,0.020416860627113752)">jumps</span>
    <span style="background-color: rgba(0,150,136,0.32688333508523415)">over</span> <span style="background-color: rgba(0,150,136,0.39459325868567396)">the</span> <span style="background-color: rgba(0,150,136,1)">lazy</span> <span style="background-color: rgba(0,150,136,0.19584999724701302)">dog</span>.
  </div>
</div>