Z-Index 不适用于 :after

Question

我试图让 h1.logo 重叠标题：之后。

我试图添加一个相对于身体的位置，正如我所看到的那样，它的 z-index 为正，但这里不是我。

有没有办法让 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

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

 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>