Text Selection On A Element Behind An Absolute Element

I have an overlay element that hides other div's that contains text. the overlay element is absolute positioned. I want the user to be able to select a text on those div's behind.

Solution 1:

You could use pointer-events on the element you want to click "through":

pointer-events: none;

It may need prefix in some browsers.

Examples: Here without pointer-events: none, you can't select the text:

#outer {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid black;
  position: relative;
}
#inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  background-color: yellow;
}

<div id="outer">
  Testing 1 2 3
  <div id="inner"></div>
</div>

Here with pointer-events: none, you can:

#outer {
  width: 100px;
  height: 100px;
  display: inline-block;
  border: 1px solid black;
  position: relative;
}
#inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  background-color: yellow;
  pointer-events: none;
}

<div id="outer">
  Testing 1 2 3
  <div id="inner"></div>
</div>

Solution 2:

You need help with javascript

https://codesandbox.io/s/jovial-hodgkin-jqrsp

Disable pointer-events when mouse is down.