modal을 무시하는 footer

[이후경]

지금까지 본 강의들을 짜집기하여 토이프로젝트를 만들고 있습니다. 

다음에 질문을 올린다면 리액트겠지 했는데, 또 html과 css를 질문하게 되네요. 하하 

 

이렇게 기본 컨텐츠들이 있고 저 ui카드를 클릭시 긴 모달창같은 느낌으로 새로운 창을 띄웠습니다. 

그런데 footer가 새로 생긴 모달창을 무시합니다. 

 

.VoteboardPost {
  position: absolute;
  z-index: 99;
  width: 100%;
  padding-bottom: 100px;
  top: 0;
  background: rgba(42, 37, 65, 0.13);
  backdrop-filter: blur(5px) grayscale(50%);
  -webkit-backdrop-filter: blur(5px) grayscale(50%);
} 

모달창  외의 부분은 흐릿하게 표현하고 싶어 이렇게 작성하고 (그 빼다 어둡고 실제 모달창은 하얀색인 예제 응용)

.Vote-blur-background {
  height: 100%;
  margin: 0 auto;
  margin-top: 180px;
  width: 1200px;
}

여기가 실제 모달의 시작 부분입니다.

 

 

footer {
  background-color: $font-color;
  width: 100%;
  border-top: 1px solid $font-color;
  margin: 0 auto;
  width: 100%;
  background-color: $font-color;
  position: absolute;
  height: 40px;
  bottom: 0;
  left: 0;
}

 

물론 전에 질문글 올렸을 때,  position: absolute는 큰 그림에 사용하지 말라고 하셨는데, 

float 사용시 

차곡차곡 잘 쌓이더라구요....... z-index도 안먹고요..

footer 저거 .......... 뭐 정보도 없는데 걍 없애버리고 행복하게 웃고싶은데 하 그러면 또 안될것같고 저 진짜 이틀 넘게 이거 하나 잡고 있어요 어서 데이터 바인딩 하고 싶어요 도와주셔여... 

 

[codingapple]

모달높이가 원래 페이지높이보다 너무 커서 그냥 저렇게 나오는게 아닐까요 

아니면 position absolute쓸 때 position relative를 부모에 잘 안줘서 그럴수도 있습니다

[글쓴이]

글