네비게이션 바 위에 음의 z- 인덱스가있는 로고를 배치하는 방법은 무엇입니까?

내 탐색 표시 줄 위에 내 로고 (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%); 
}

출처

2017-10-05 martin

봅니다'그것을 사용을 강제로! important'! –

방금 html과 css를 배우기 시작했습니다. 그래서 나는 그것을 코드에 적용하는 방법을 모른다. – martin

'z-index : -1! 중요하다; 당신은 당신의 nav bar의 아래 또는 위에 그것을 원합니 까? –

이 .neon에 position:absolute는 DOM의 흐름에서 그것을 받아 (의 맨 위에) 위를 넣어 갖는 다른 요소 . 당신은 그것없이 당신이 필요로하는 센터링을 달성 할 수 있습니다.

가 문제를 해결하기 위해 나는 한 다음

'인라인 블록' '상대'
변경된 .neon에
변경된 .neon 위치로 변경된 .neon 표시 : 콘텐츠 후 .neon에서 ''(빈)
제거 Z- 색인 : .neon의
변경된 후 Z- 색인 : 이전에 -1

012,351

아래 'Run code snippet'을 클릭하십시오.

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

출처

2017-10-05 16:08:32

코드 조각에서 문제가 해결되지 않은 것처럼 보입니다. – martin

로고가 탐색 창 위에 있도록하고 싶지 않았습니까? –

예. 원하는게 있습니다. – martin

네비게이션 바 위에 음의 z- 인덱스가있는 로고를 배치하는 방법은 무엇입니까?

답변

관련 문제