如何让指定div元素文本可选中并置于其他HTML元素上层？

针对你提供的<div>元素，要实现文本可选中和层级置于其他元素之上，可以通过添加以下CSS规则来完成：

1. 让文本可选中 #

部分类如视频字幕类的div可能默认被设置了禁止选中的样式，我们可以通过user-select属性强制开启文本选中功能：

.jw-text-track-cue.jw-reset {
  user-select: text;
  /* 兼容旧版浏览器 */
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

这个属性会覆盖任何阻止文本选中的默认样式，让用户可以正常选中div内的文字。

2. 让元素置于其他元素之上 #

由于你的div已经设置了position: relative，只需要添加z-index属性提高层级即可：

.jw-text-track-cue.jw-reset {
  z-index: 9999; /* 数值足够大即可，可根据页面其他元素的z-index调整 */
}

z-index仅对设置了position: relative/absolute/fixed/sticky的元素生效，你的div已满足条件，设置较高数值就能让它覆盖在同一位置的其他元素上方。

合并后的完整CSS #

可以把两个规则合并成一个：

.jw-text-track-cue.jw-reset {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  z-index: 9999;
}

内容的提问来源于stack exchange，提问作者AZeed