Wie platziert man ein Logo mit negativem Z-Index oberhalb der Navigationsleiste?

Ich habe versucht, mein Logo (das ich in CSS gemacht habe) über der Navigationsleiste zu platzieren. Das Logo hat einen negativen Z-Index. Ich habe versucht, es zu beheben. Aber ich weiß immer noch nicht, wie ich es beheben soll. Wenn ich den Code einlege, wird das Logo über die Navigationsleiste gelegt. Kann mir jemand helfen, das Logo über dem Navigationsbalken zu platzieren?Wie platziert man ein Logo mit negativem Z-Index oberhalb der Navigationsleiste?

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

Quelle

2017-10-05 martin

Versuchen Sie es und Gebrauch zu zwingen '! Important' !! –

Ich habe gerade angefangen, HTML und CSS zu lernen. Also ich weiß nicht, wie ich es in meinem Code anwenden soll. – martin

'Z-Index: -1! wichtig; 'willst du es unter oder auf deiner Navigationsleiste? –

Mit position:absolute auf .neon es aus dem Fluss des DOM nimmt und es wird oben setzen (über die Oberseite des) anderen Elemente . Sie können die Zentrierung, die Sie benötigen, ohne sie erreichen.

zu lösen Ihr Problem habe ich folgendes:

Geänderte .neon Anzeige zu 'inline-block'
Changed .neon Position 'relative'
Geänderte .neon: nach Inhalt '' (leer)
Entfernte z-Index von .neon: nach
Changed z-Index von .neon: vor -1

012.

Klicken Sie unten auf "Code-Snippet ausführen".

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

Quelle

2017-10-05 16:08:32

Im Snippet scheint das Problem nicht gelöst zu sein – martin

Wollten Sie das Logo nicht über dem Navigationsfenster? –

ja, das ist was ich will – martin

Wie platziert man ein Logo mit negativem Z-Index oberhalb der Navigationsleiste?

Antwort

Verwandte Themen