css绝对位置阻止文本选择

Question

如何使文本可选？我已经用z-index尝试过了

.blue {
  background-color: blue;
}

.lighten {
  opacity: 0.5;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="relative">
  this text cannot be selected
  <div class="absolute blue lighten">
  </div>
</div>

https://codepen.io/anon/pen/Ozpzew

Answer 1

禁用绝对定位元素上的指针事件,它将允许您选择它背后的文本

.blue {
  background-color: blue;
}

.lighten {
  opacity: 0.5;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

<div class="relative">
  this text can now be selected
  <div class="absolute blue lighten">
  </div>
</div>