Question

我有一个图像，我想添加为：after元素到导航栏。关键是：after会覆盖下一部分的顶部（这是设计的一部分）。

将：after设置为position：绝对值为top：100％并且它似乎在下一个元素下消失，z-index没有帮助。当top设置为小于100％的任何值时，您可以在nav上方看到：after元素。

标记：

<nav>Contents</nav>
<div>Contents</div>

CSS：

nav {
    width: 100%;
    position: relative;
}

nav:after {
    content: '';
    width: 100%;
    height: 66px;
    background-image: url('image.png');
    background-repeat: repeat-x;
    position: absolute;
    left: 0;
    top: 100%;
}

No CSS for div yet...

提前致谢！

Answer 1

您需要的是将Content div上的z-index设置为低于伪元素的z-index，但请注意Content div必须在静态以外的任何位置设置位置... position：relative通常是足够的。

或者，只需将伪元素的z-index设置为高于div的值{（可能默认为1）。

nav {
  width: 100%;
  position: relative;
  height: 50px;
  background: lightgreen;
}
nav:after {
  content: '';
  width: 100%;
  height: 66px;
  background: rgba(0, 0, 255, 0.5);
  background-repeat: repeat-x;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 2;
}
div {
  height: 260px;
  position: relative;
  background: rgba(255, 0, 0, 0.5);
}

<nav>Nav</nav>
<div>Contents</div>

可以：在背景图像之后用于重叠下一个元素吗？

1 个答案: