다른 요소의 높이를 덮기 위해 오버레이 만들기

Question

오버레이로 덮어야하는 여러 요소가 화면에 있습니다. 요소는 크기가 다르며 페이지 수명 기간 동안 크기를 조정할 수 있습니다.

.upgrade { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
} 

완전히 다른를 커버하는 하나 개의 요소를 설정하는 CSS에서 어떤 방법이 있나요 :

나는 작동하지 않는 100 % 높이를 제외하고, 필요한 오버레이를 배치하기 위해 CSS를 사용할 수 있었다. CSS가 옵션이 아니라면 jQuery/JavaScript를 사용하여 초기 높이를 설정 한 다음 resize 이벤트를 추적하는 것이 좋습니다. 그것이 바로 행동의 과정이라고 희망합니다 ...

하지만 100 % 높이 문제는 CSS로 해결할 수 있기를 바랍니다. 당신의 도움은 대단히 감사합니다!

Answer 1

절대적으로 배치 된 요소를 HTML에 포함되어야하는 요소 내에 배치하십시오. 그런 다음 덮으려는 요소를 position: relative;으로 만듭니다.

.upgrade { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
} 

절대적으로 위치 요소가 이제 상대 위치가 가장 가까운 부모의 관계에 배치됩니다

은 그 후 당신에게 절대 위치 요소의 CSS를 수정합니다. 따라서 위, 아래, 왼쪽, 오른쪽은 전체 문서 대신 해당 요소와 관련되어 있으므로 전체 요소를 포함해야합니다.

는 업데이트 : 절대 위치에 대한

더 MDN에서 확인할 수있다. CSS-Tricks도이 주제에 대해 a short article입니다.