title: I'd like to superpose 2 div to make an overlay over some text
body: <p><strong>jsfiddle:</strong> <a href="https://jsfiddle.net/h7zq8uj2/9/" rel="nofollow noreferrer">https://jsfiddle.net/h7zq8uj2/9/</a>  </p>
  
  <p>I have a div that is supposed to contain only text and another one that should contain the same text but encapsulate words into span to make an overlay. In my app the first div is editable and the overlay is used to highlight words.  </p>
  
  <p>My issue is that both div aren't superposed. If I remove the inline-block from the wrap they are, but I need it to be aligned with the label. I could use some tweaks like a negative left value on the overlay, but I'd prefer a cleaner solution. Any idea what is causing this issue?  </p>
  
  <p>Apparently I can't post a jsfiddle link without code, so here is the css:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p><strong>EDIT:</strong> The dog in red should be superposed with the dog in black, in practice the overlay text color is transparent and the colored span are superposed with words to highlight them.</p>
  
  <p><strong>EDIT 2:</strong> It works as intended on Firefox, the issue appears on google chrome.</p>