테스트 사이트 - 개발 중인 베타 버전입니다

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

컴대장 2년 전 조회 1,976

안녕하세요.

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

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

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

잘 안되네요.

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

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

감사합니다. 

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

답변 1개

채택된 답변
+20 포인트
2년 전

.bx-controls 노드를

 

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

 

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

</p>

<p>.m_popupFoot {

    position: -webkit-sticky;

    position: sticky;</p>

<p>    bottom: 0;</p>

<p>    ...</p>

<p>}</p>

<p>

.m_popupZone .bx-controls {

    position: -webkit-sticky;

    position: sticky;</p>

<p>    bottom: 0;</p>

<p>    ...

}</p>

<p>

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

답변에 대한 댓글 5개

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

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

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

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

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

로그인