Question

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

我试图按照我推荐的方式添加一个相对于身体的位置具有正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即可

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Z-Index并不适用于：之后

1 个答案: