html - Z-Index 不适用于 :after

Question

我正在尝试让 h1.logo 与 header:after 重叠。

我尝试按照我看到的建议添加一个相对于具有正 z-index 的 body 的位置，但我在这里不这样做。

有没有办法让 z-index 起作用？

这是我的代码css

body {
  position: relative;
  z-index: 100;
}
header {
  background: #184677;
  width: 100%;
  height: 55px;
  position: relative;
  }
header:after {
    content:""; 
    display:block; 
    position:absolute; 
    z-index:0; 
    left:0px; 
    right:0px;
    bottom:-8px; border-bottom:4px solid #184677;
  }
  a {
    text-decoration: none;
    color: #eee;
  }
  h1.logo {
    display: inline;
    float: left;
    margin: 0 0 0 13%;
    padding: 15px;
    background: green;
    border-radius: 0 0 3px 3px;
    z-index: 100;
  }

这是html

<header>
    <h1 class="logo"><a href="#">Test</a></h1>
</header>

Answer 1

只需在 header:after 上使用 z-index: -1;

body {
  position: relative;
  z-index: 100;
}
header {
  background: #184677;
  width: 100%;
  height: 55px;
  position: relative;
}
header:after {
  content:""; 
  display:block; 
  position:absolute; 
  z-index:-1;                /* -1 instead of 0 */
  left:0px; 
  right:0px;
  bottom:-8px; border-bottom:4px solid #184677;
}
a {
  text-decoration: none;
  color: #eee;
}
h1.logo {
  display: inline;
  float: left;
  margin: 0 0 0 13%;
  padding: 15px;
  background: green;
  border-radius: 0 0 3px 3px;
  z-index: 100;
}

<header>
  <h1 class="logo"><a href="#">Test</a></h1>
</header>