Question

我尝试将我的徽标（我在CSS中制作）放在导航栏上方。徽标具有负z指数。我试着解决它。但我仍然不知道如何解决它。当我加载代码时，它将徽标放在导航栏上。任何人都可以帮我将徽标放在导航上方吗？

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显示更改为＆＃39; inline-block＆＃39;
将.neon位置更改为＆＃39; relative＆＃39;
更改.neon：在内容发布后＆＃39;＆＃39; （空）
从.neon中移除了z-index：在
将.neon：之前的z-index更改为-1

点击＆＃39;运行代码段＆＃39;下方。

＆＃13;

@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%);
}

＆＃13;

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

＆＃13;

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

1 个答案: