我试图将我的 Logo (我用 CSS 制作)放在导航栏上方。 Logo 具有负 z-index。我试图修复它。但我仍然不知道如何解决它。当我加载代码时，它会将 Logo 放在导航栏上。谁能帮我把标志放在导航栏上方？
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%);
}
最佳答案
在 .neon 上设置 position:absolute 会将其从 DOM 流中移除，并将其置于其他元素之上(在顶部)。没有它，您也可以实现所需的居中。
为了解决您的问题，我做了以下工作:
- 将 .neon 显示更改为“inline-block”
- 将 .neon 位置更改为“相对”
- 将 .neon:after content 更改为 ''(空)
- 从 .neon:after 中删除了 z-index
- 将 .neon:before 的 z-index 更改为 -1
点击下面的“运行代码片段”。
@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>关于html - 如何在导航栏上方放置带有负 z-index 的 Logo ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46589257/