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

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

background-color z-index css javascript

Kyle Lemon · 技术社区 · 6 年前

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

谢谢

1 回复 | 直到 6 年前

DaniP 6 年前

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

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

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

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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前