0
ナビゲーションバーの上に私のロゴ（CSSで作ったもの）を配置しようとしました。ロゴには負のZ-インデックスがあります。私はそれを修正しようとしました。しかし、私はまだそれを修正する方法を知らない。コードを読み込むと、ナビゲーションバーにロゴが表示されます。誰かがナビゲーションの上にロゴを置くのを助けることができますか？ナビゲーションバーの上に負の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%);
}
！ 'important'をそれを強制して使用してみてください！ –
私はちょうどhtmlとcssを学び始めました。だから私は自分のコードでそれを適用する方法を知らない。 – martin
'z-index：-1！重要な;あなたはあなたのnav barの下または上にそれを望みますか？ –