섀도우 전용 CSS Z- 색인

Question

내 둥근 버튼의 호버 천이 중에 생성 된 그림자를 div (빨간색 원)로 겹쳐서 만들려고합니다. 그래야 푸들 효과가 내 div에 표시되지만 다른 위치에는 표시되지 않습니다. 그리고는 그림자를 원하는 -

body { 
 
    background: #292f33; 
 
    text-align: center; 
 
    color: #FFF; 
 
    font-family: sans-serif; 
 
} 
 
.btntest { 
 
    width: 190px; 
 
    padding: 4px; 
 
    border-radius: 5px; 
 
    background: red; 
 
    color: white; 
 
    z-index: 299; 
 
    position: fixed; 
 
} 
 
.button { 
 
    position: fixed; 
 
    z-index: 300; 
 
    left: 10px; 
 
    display: inline-block; 
 
    height: 60px; 
 
    width: 60px; 
 
    border-radius: 50%; 
 
    background: rgba(255, 255, 255, 1); 
 
} 
 
.button:hover { 
 
    animation: pulse 1.1s ease-out; 
 
    animation-iteration-count: infinite; 
 
} 
 
@keyframes pulse { 
 
    0% { 
 
    z-index: 298; 
 
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0); 
 
    } 
 
    25% { 
 
    z-index: 298; 
 
    box-shadow: 0 0 0 2px rgba(85, 172, 238, .4); 
 
    } 
 
    49.9% { 
 
    z-index: 298; 
 
    box-shadow: 0 0 0 5px rgba(85, 172, 238, 0); 
 
    } 
 
    50% { 
 
    z-index: 298; 
 
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0); 
 
    } 
 
    75% { 
 
    z-index: 298; 
 
    box-shadow: 0 0 0 20px rgba(85, 172, 238, .6); 
 
    } 
 
    99.9% { 
 
    z-index: 298; 
 
    box-shadow: 0 0 0 7px rgba(85, 172, 238, 0); 
 
    } 
 
    100% { 
 
    z-index: 298; 
 
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0); 
 
    } 
 
} 
 
@-webkit-keyframes pulse { 
 
    0% { 
 
    z-index: 298; 
 
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0); 
 
    } 
 
    25% { 
 
    z-index: 298; 
 
    box-shadow: 0 0 0 2px rgba(85, 172, 238, .4); 
 
    } 
 
    49.9% { 
 
    z-index: 298; 
 
    box-shadow: 0 0 0 5px rgba(85, 172, 238, 0); 
 
    } 
 
    50% { 
 
    z-index: 298; 
 
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0); 
 
    } 
 
    75% { 
 
    z-index: 298; 
 
    box-shadow: 0 0 0 20px rgba(85, 172, 238, .6); 
 
    } 
 
    99.9% { 
 
    z-index: 298; 
 
    box-shadow: 0 0 0 7px rgba(85, 172, 238, 0); 
 
    } 
 
    100% { 
 
    z-index: 298; 
 
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0); 
 
    } 
 
}

<p>Pulse Effect</p> 
 
<a class="button"></a> 
 
<div class="btntest">Test</div>

이

내가 전환 그림자는 z-index 속성을 부여했지만 매번 내가 가져가, 버튼도 다시 DIV 아래 숨 깁니다
여기 내 코드입니다 숨기려고. 어떻게해야합니까?

Answer 1

@connexo가 말했듯이, 요소의 그림자는 항상 요소의 레벨과 동일합니다. 모든 작업이 주위에

body { 
 
    background: #292f33; 
 
    text-align: center; 
 
    color: #FFF; 
 
    font-family: sans-serif; 
 
} 
 
.btntest { 
 
    width: 190px; 
 
    padding: 4px; 
 
    border-radius: 5px; 
 
    background: red; 
 
    color: white; 
 
    z-index: 299; 
 
    position: fixed; 
 
} 
 
.button { 
 
    position: fixed; 
 
    z-index: 300; 
 
    left: 10px; 
 
    display: inline-block; 
 
    height: 60px; 
 
    width: 60px; 
 
    border-radius: 50%; 
 
    background: rgba(255, 255, 255, 1); 
 
} 
 
.fake-btn { 
 
    position: fixed; 
 
    z-index: 298; 
 
    left: 10px; 
 
    display: inline-block; 
 
    height: 60px; 
 
    width: 60px; 
 
    border-radius: 50%; 
 
    margin: 0; 
 
    background: rgba(255, 255, 255, 0); 
 
} 
 
.button:hover + .fake-btn { 
 
    animation: pulse 1.1s ease-out; 
 
    animation-iteration-count: infinite; 
 
} 
 
@keyframes pulse { 
 
    0% { 
 
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0); 
 
    } 
 
    25% { 
 
    box-shadow: 0 0 0 2px rgba(85, 172, 238, .4); 
 
    } 
 
    49.9% { 
 
    box-shadow: 0 0 0 5px rgba(85, 172, 238, 0); 
 
    } 
 
    50% { 
 
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0); 
 
    } 
 
    75% { 
 
    box-shadow: 0 0 0 20px rgba(85, 172, 238, .6); 
 
    } 
 
    99.9% { 
 
    box-shadow: 0 0 0 7px rgba(85, 172, 238, 0); 
 
    } 
 
    100% { 
 
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0); 
 
    } 
 
} 
 
@-webkit-keyframes pulse { 
 
    0% { 
 
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0); 
 
    } 
 
    25% { 
 
    box-shadow: 0 0 0 2px rgba(85, 172, 238, .4); 
 
    } 
 
    49.9% { 
 
    box-shadow: 0 0 0 5px rgba(85, 172, 238, 0); 
 
    } 
 
    50% { 
 
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0); 
 
    } 
 
    75% { 
 
    box-shadow: 0 0 0 20px rgba(85, 172, 238, .6); 
 
    } 
 
    99.9% { 
 
    box-shadow: 0 0 0 7px rgba(85, 172, 238, 0); 
 
    } 
 
    100% { 
 
    box-shadow: 0 0 0 0 rgba(85, 172, 238, 0); 
 
    } 
 
}

<p>Pulse Effect</p> 
 

 
<a class="button"></a> 
 
<p class="fake-btn"></p> 
 
<div class="btntest">Test</div>

Answer 2

이렇게하면 작동하지 않습니다. 요소의 그림자는 항상 그림자가있는 요소와 동일한 Z- 색인 수준에 쌓입니다.