SIR
목록으로

레이어 팝업창 하단에 고정하기 채택완료

컴컴대장
프로필 보기이 회원 글보기이 회원의 댓글보기
 2년 전 조회 2,180
답변 1
목록

안녕하세요.

링크사이트에 보시면 레이어 팝업창이 뜨는데요.

이미지가 팝업창 보다 클경우 스크롤바가 생기고 아래로 내려 내용을 볼 수 있게했습니다.

그런데 올리면 콘트롤 버튼 레이어가 딸려 올라가 버리는데 고정시킬 css 스타일을 찾아 적용해 봐도

잘 안되네요.

소스보기 하시면 스타일 시트 정의된 부분이 보입니다.

css 고수님의 답변을 기다립니다.

감사합니다. 

#레이어고정 #레이어팝업

답변 1개

채택된 답변
+20 포인트

.bx-controls 노드를

2009389905_1688640633.747.png

 

.m_popupFoot 노드의 다음 형제노드로 이동시키고

2009389905_1688640643.8027.png

 

다음 스타일을 적용시켜 보는 방법이 있을것 같습니다.

Copy 
.m_popupFoot {
    position: -webkit-sticky;
    position: sticky;

    bottom: 0;

    ...

}


.m_popupZone .bx-controls {
    position: -webkit-sticky;
    position: sticky;

    bottom: 0;

    ...
}
로그인 후 평가할 수 있습니다

답변에 대한 댓글 5개

와우~ 정말 대단하십니다.
그런데 마지막까지 내리면 콘트롤 버튼이 올라가 버리네요.
한번 봐주실래요?
.bx-controls 노드가 .m_popupFoot 노드의 다음 형제노드로 이동 되지 않은것 같습니다.

위 방법이 쉽지 않을경우
.bx-controls 노드의 이전 형제노드로 .m_popupFoot 노드를 이동시키는것도 방법일것 같습니다.
상기 이미지와 같이 소스를 보려면 어떻게 해야 하는지요?
옮기고 싶어도 옮길께 보이지 않네요.ㅠㅠ
죄송합니다.
이미지는 F12 개발자도구의 요소 탭에서 확인할수 있습니다.
아니면 편법으로 margin-top 속성을 추가해서 처리하는것도 방법일것 같습니다.

[code]
.m_popupFoot {
position: -webkit-sticky;
position: sticky;
bottom: 0;
...
margin-top: -45px;
}
[/code]
편법이 가끔 편할때가 있네요.
자세한 답변 감사합니다.
건강하세요.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고