오버레이를 적용하여 로그인 또는 가입 링크를 클릭했을 때 배경이 흐리게 표시 될 때 https://fancy.com과 비슷한 효과를 내기 위해 노력하고 있습니다.페이지의 모든 영역에 오버레이가 적용되지 않습니다.
문제는 내 탐색 막대와 콘텐츠 상자가 어떤 이유로 오버레이에 종속되지 않지만 그 이유가 확실하지 않다는 것입니다.
나는 설명하기 위해 바이올린을 만들었습니다 https://jsfiddle.net/p861yfLp/1/
내 코드 :
<body>
<div class="overlay">
<nav>
Menu
</nav>
<div id="content">
<div class="box">
Box
</div>
</div>
</div>
</body>
변경이 파일
CSS - 절대
.overlay {
position: absolute;
}
에 위치를 설정 편집 : 다음 @ Dan iP에서 오버레이에 대한 '모달'느낌을 원할 경우 CSS에 대한 변경 사항은 필요하지 않습니다. 절대 위치를 사용하여 내가 추천하는 모든 것을 오버레이하고 싶다면.
HTML - 오버레이를 만들 필요는 다른 모든 HTML을 포함
<body>
<div class="overlay"></div>
<nav>
Menu
</nav>
<div id="content">
<div class="box">
Box
</div>
</div>
</body>
이제 오버레이 '오버레이'것이다.
검정색 배경색이 실제로 적용되지만 nav (하위 요소로 사용)에는 고유 한 배경색 (#FFF)이 정의되어 있습니다. 당신은 그것의 배경 색상을 제거하면, 그것은 작동 :
.nav {
background-color: transparent;
}
모든 콘텐츠는 오버레이 내부에 .. https://jsfiddle.net/p861yfLp/2/ – DaniP