如何在导航栏上方放置带有负 z-index 的徽标？

Question

我试图将我的徽标（我在 CSS 制作的）放在导航栏上方。徽标具有负 z-index。我试图修复它。但我仍然不知道如何解决它。当我加载代码时，它会将徽标放在导航栏上。谁能帮我把标志放在导航栏上方？

HTML:

    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="random.css">
   </head>

   <body>
   <div class="logo">
   <h1 class="neon" data-text="[Home page]">[Home page]</h1>
   </div>

   <div class="menubalk">
   <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">Contact</a></li>
    </ul>
    </div>


   </body>



    </html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Quicksand:300');

body {

  background: url(bg.jpg);
  background-size: cover;
  font-family: 'Quicksand', sans-serif;

}



.neon {
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  margin-bottom: 50px;
  padding: 0 20px;
  font-size: 6em;
  color: #fff;
  text-shadow: 0 0 20px #ff005b;


}

.neon:after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 20px;
  z-index: -1;
  color: #ff005b;
  filter: blur(15px)
}

.neon:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fe3a80;
  z-index: -2;
  opacity: .5;
  filter: blur(40px);


}

ul {
  display: block;
  padding: 0;
  font-family: Arial;
  display: flex;
  background: white;
}

ul li {
  list-style: none;
  padding: 10px 20px;

}

ul li a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 2em;
  color: #262626;
  position: relative;

}

ul li a:before {
  content: '';
  width: 0px;
  height: 5px;
  background: #00bcd4;
  position: absolute;
  top: 100%;
  left: 0;
  transition: .5s;
}

ul li:hover a:before {
  width: 50%;
  transform: translateX(100%);
}

Answer 1

在 .neon 上设置 position:absolute 将其从 DOM 流中移除，并将其置于其他元素之上（在顶部）。不用它也能实现你需要的居中。

为了解决您的问题，我执行了以下操作：

将 .neon 显示更改为 'inline-block'
将 .neon 位置更改为 'relative'
将 .neon:after content 更改为 ''（空）
从 .neon:after
将 .neon:before 的 z-index 更改为 -1

点击下面的'Run code snippet'。

@import url('https://fonts.googleapis.com/css?family=Quicksand:300');

body {

  background: url(bg.jpg);
  background-size: cover;
  font-family: 'Quicksand', sans-serif;

}



.neon {
  display: inline-block;
  position:relative;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  margin-bottom: 50px;
  padding: 0 20px;
  font-size: 6em;
  color: #fff;
  text-shadow: 0 0 20px #ff005b;
}

.neon:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 20px;  
  color: #ffffff;
  filter: blur(15px)
}

.neon:before {
  content: '';
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fe3a80;
  opacity: .5;
  filter: blur(40px);


}

ul {
  display: block;
  padding: 0;
  font-family: Arial;
  display: flex;
  background: white;
}

ul li {
  list-style: none;
  padding: 10px 20px;

}

ul li a {
  text-decoration: none;
  text-transform: uppercase;
  font-size: 2em;
  color: #262626;
  position: relative;

}

ul li a:before {
  content: '';
  width: 0px;
  height: 5px;
  background: #00bcd4;
  position: absolute;
  top: 100%;
  left: 0;
  transition: .5s;
}

ul li:hover a:before {
  width: 50%;
  transform: translateX(100%);
}

   <body>
   <div class="logo">
   <h1 class="neon">Logo</h1>
   </div>

   <div class="menubalk">
   <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Portfolio</a></li>
   <li><a href="#">Contact</a></li>
    </ul>
    </div>


   </body>

如何在导航栏上方放置带有负 z-index 的徽标？

how to place logo with negative z-index above navigation bar?

html

css

z-index