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

Question

如何让这个 JavaScript 突出显示范围出现在 页脚背景和页脚中的元素之间？

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

示例一 - 高亮显示在具有部分透明背景的页脚后面。

.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

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

Highlight span between footer background and content

javascript

css

z-index

background-color