Почему я не могу выделить текст, когда применяются события указателя: нет и позиция: абсолютный?

Question

Я не могу выделить текст, если родительский элемент .block имеет pointer-events:none, а дочерний элемент - position:absolute. Когда я удаляю position:absolute, это работает, но мне нужно это позиционирование.

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

Answer 1

Просто добавьте pointer-events: initial; к вашему селектору: Демо .Примечание: pointer-events: all;, похоже, также работает, но в документах упоминается, что это значение только для SVG, поэтому я остановлюсь на initial, чтобы восстановить события указателя в исходное состояние.

Для справки: pointer-eventsимеет довольно много опций, которые вы можете прочитать о здесь .