突出显示页脚背景和内容之间的跨度

Question

如何让这个JavaScript高亮显示跨度在页脚背景和页脚中的元素之间显示？

增加z-index元素似乎无法实现这一点。

示例一 - 突出显示在页脚后面，背景部分透明。

https://codepen.io/jklemon17/pen/KoydPy

.footer {
  background-color: rgba(70, 70, 70, .5);
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-top: 50px;
  padding-bottom:100px;
/*   z-index: -2; */
}

示例二 - 突出显示在页脚元素的顶部。

https://codepen.io/jklemon17/pen/xWPGBm

.footer {
  background-color: grey;
  position: fixed;
  bottom: 0;
  width: 100%;
  padding-top: 50px;
  padding-bottom:100px;
  z-index: -2;
}

谢谢！

Answer 1

在这种情况下，最好的是append页脚的突出显示元素而不是正文，这样z-index将更容易处理。在代码中更改为：

const footer =
document.querySelector('.footer');

highlight.classList.add('highlight');
footer.append(highlight);

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