레이어 팝업창 하단에 고정하기
관련링크
https://www.gunwi.net
75회 연결
본문
안녕하세요.
링크사이트에 보시면 레이어 팝업창이 뜨는데요.
이미지가 팝업창 보다 클경우 스크롤바가 생기고 아래로 내려 내용을 볼 수 있게했습니다.
그런데 올리면 콘트롤 버튼 레이어가 딸려 올라가 버리는데 고정시킬 css 스타일을 찾아 적용해 봐도
잘 안되네요.
소스보기 하시면 스타일 시트 정의된 부분이 보입니다.
css 고수님의 답변을 기다립니다.
감사합니다.
답변 1
.bx-controls 노드를
.m_popupFoot 노드의 다음 형제노드로 이동시키고
다음 스타일을 적용시켜 보는 방법이 있을것 같습니다.
.m_popupFoot {
position: -webkit-sticky;
position: sticky;
bottom: 0;
...
}
.m_popupZone .bx-controls {
position: -webkit-sticky;
position: sticky;
bottom: 0;
...
}
와우~ 정말 대단하십니다.
그런데 마지막까지 내리면 콘트롤 버튼이 올라가 버리네요.
한번 봐주실래요?
.bx-controls 노드가 .m_popupFoot 노드의 다음 형제노드로 이동 되지 않은것 같습니다.
위 방법이 쉽지 않을경우
.bx-controls 노드의 이전 형제노드로 .m_popupFoot 노드를 이동시키는것도 방법일것 같습니다.
상기 이미지와 같이 소스를 보려면 어떻게 해야 하는지요?
옮기고 싶어도 옮길께 보이지 않네요.ㅠㅠ
죄송합니다.
이미지는 F12 개발자도구의 요소 탭에서 확인할수 있습니다.
아니면 편법으로 margin-top 속성을 추가해서 처리하는것도 방법일것 같습니다.
.m_popupFoot {
position: -webkit-sticky;
position: sticky;
bottom: 0;
...
margin-top: -45px;
}
편법이 가끔 편할때가 있네요.
자세한 답변 감사합니다.
건강하세요.
답변을 작성하시기 전에 로그인 해주세요.
