CODEWITHSUNDEEP
htmlcssgoogle-chrome
François MENTEC
François MENTEC

Reputation: 1304

I'd like to superpose 2 div to make an overlay over some text

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

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.

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?

Apparently I can't post a jsfiddle link without code, so here is the 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;
}

EDIT: 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.

EDIT 2: It works as intended on Firefox, the issue appears on google chrome.

Upvotes: 0

Views: 269

Answers (1)

caramba
caramba

Reputation: 22490

You can add a width: 100%; to .content, .overlay { Fiddle here

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>

Upvotes: 1

Related Questions