我試圖將我的標誌(我用CSS製作)放在導航欄上方。該徽標具有負Z指數。我試圖修復它。但我仍然不知道如何解決它。當我加載代碼時,它將徽標放置在導航欄上。任何人都可以幫我把標誌放在導航欄上面嗎?如何在導航欄上方放置負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%);
}
試圖迫使它和使用'!important'! –
我剛開始學習HTML和CSS。所以我不知道如何在我的代碼中應用它。 – martin
'z-index:-1!重要的;'你想要它在你的導航欄下或在你的導航欄? –