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

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

在这种情况下，最好的方法是将突出显示元素附加 到页脚而不是正文，这样z-index 会更容易处理。在您的代码中对此进行更改:

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

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

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