代码之家 › 专栏 › 技术社区 › Kyle Lemon

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

background-color z-index css javascript

1

Kyle Lemon · 技术社区 · 8 年前

如何显示此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;
}

谢谢

1 回复 | 直到 8 年前

1

DaniP 8 年前

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

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

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

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