Search code examples
csscss-positionpointer-events

Why can't I select text when pointer-events:none and position:absolute are applied?

I can't select text when the parent .block element has pointer-events:none and the child element has position:absolute. When I remove position:absolute, it works, but I need this positioning.

.block{
  position:relative;
  height:20px;
  background:red;
  color:#fff;
  margin-bottom:20px;
  pointer-events:none;
}

p{
  position:absolute;
  top:0;
  left:0;
  margin:0;

}
<div class="block">hovered</div>
<div class="block"><p>can`t be hovered</p></div>

Solution

  • Just add pointer-events: initial; to your selector: Demo. Note: pointer-events: all; appears to work as well, but the docs mention it's an SVG only value, so I'd stick with initial to restore the pointer events to their initial state.

    For reference, pointer-events has quite a few options, which you can read about here.