움직이는 요소 내부의 고정 요소

Question

전체 페이지에 오버레이를 적용하고 오버레이보다 높은 입력 상대 위치 및 Z 색인을 제공하여 입력을 강조하고 싶습니다. 다음과 같은

.overlay { 
    position: fixed; 
    z-index: 1; 

    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 

    background-color: rgba(0, 0, 0, 0.4);  
} 

.is-highlighted { 
    position:relative; 
    z-index:2; 
} 

뭔가 : 나는 흰색 카드를 애니메이션을 줄 때까지 모두 잘 작동

. 그런 다음, 고정 오버레이뿐만 아니라 전체 페이지, 카드에 걸쳐 낳는 :

여기 경우 보여주는 바이올린입니다 : https://jsfiddle.net/ys5jot5s/1/

애니메이션을 주석을 올바르게 오버레이 위치 자체를 만든다.

전체 페이지를 오버레이로 채우려면 어떻게해야합니까? 또는 오버레이를 카드 외부로 던지려고했지만 그 앞에 입력 팝업이 보이지 않는 것 같습니다.

Answer 1

변형 속성은 고정 된 요소가 변형 된 요소에 고정된다는 의미의 새 로컬 좌표계를 만듭니다.

https://w3.org/TR/css-transforms-1/#transform-rendering

하나의 솔루션으로 이동 오버레이하고 카드에 자신의 오버레이를 추가합니다.

.container { 
 
    padding: 2rem; 
 
    background-color: rgb(239, 96, 48); 
 
} 
 

 
@keyframes slide-down { 
 
    0% { 
 
    transform: translate(0, -1rem); 
 
    } 
 

 
    100% { 
 
    transform: translate(0, 0); 
 
    } 
 
} 
 

 
.card { 
 
    padding: 1rem; 
 
    background-color: white; 
 
    animation: slide-down 0.8s normal forwards; 
 
    position: relative; 
 
    z-index: 3; 
 
} 
 

 
.card::before { 
 
    content: ""; 
 
    background: rgba(0,0,0,.5); 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
.is-highlighted { 
 
    position:relative; 
 
    z-index:2; 
 
} 
 

 
.overlay { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(0, 0, 0, 0.4); 
 
    z-index: 1; 
 
    
 
    transition: 0.8s all; 
 
}

<div class="container"> 
 
    <div class="card"> 
 
    <textarea rows="6" placeholder="Not highlighted"></textarea> 
 
    <textarea rows="6" class="is-highlighted" placeholder="Highlighted"></textarea> 
 
    </div> 
 
    <div class="overlay"></div> 
 
</div>

([-webkit 변환 형을 사용할 때 작동하지 않는 고정 된 위치]의