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

재질문... 사이드뷰가려짐 문제.. 채택완료

나방큰도그래 2년 전 조회 2,042

부트스트랩 인데... z-index: 넣어도 같습니다...  overflow:auto 옵션떄문인거같은데.. 해결방안 도움좀 요청드립니다.

</strong></p>

<pre>
<code><!-- 현재접속자 목록 시작 { -->
<div class="bg-info text-white text-center py-2 rounded">
    <p>( 총 접속자 : <?php echo number_format($stats['now_mb']) ?> / <?php echo number_format($stats['now_total']) ?>명 )</p>
</div>
<div id="current_connect">
<table class="table table-striped w-100">
    <?php
    for ($i=0; $i<count($list); $i++) {
        //$location = conv_content($list[$i]['lo_location'], 0);
        $location = $list[$i]['lo_location'];
        // 최고관리자에게만 허용
        // 이 조건문은 가능한 변경하지 마십시오.
        if ($list[$i]['lo_url'] && $is_admin == 'super') $display_location = "<a href=\"".$list[$i]['lo_url']."\">".$location."</a>";
        else $display_location = $location;
        if (!$list[$i]['name']) continue;
        if ($list[$i]['mb_level'] == 1) $list[$i]['level'] = "①";
        else if ($list[$i]['mb_level'] == 2) $list[$i]['level'] = "②";
        else if ($list[$i]['mb_level'] == 3) $list[$i]['level'] = "③";
        else if ($list[$i]['mb_level'] == 4) $list[$i]['level'] = "④";
        else if ($list[$i]['mb_level'] == 5) $list[$i]['level'] = "⑤";
        else if ($list[$i]['mb_level'] == 6) $list[$i]['level'] = "⑥";
        else if ($list[$i]['mb_level'] == 7) $list[$i]['level'] = "⑦";
        else if ($list[$i]['mb_level'] == 8) $list[$i]['level'] = "⑧";
        else if ($list[$i]['mb_level'] == 9) $list[$i]['level'] = "⑨";
        else $list[$i]['mb_level'] = "⑩";
    ?>
        <tr>
            <td>
                <?php echo $list[$i]['level']; ?>
                <?php echo $list[$i]['name']; ?>
                (<?php echo ($list[$i]['mb_level']) ? get_member_grade($list[$i]['mb_level']) : $list[$i]['mb_level']; ?>)
            </td>
        </tr>
    <?php
    }
    if ($i == 0)
        echo "<tr class=\"empty_li\">현재 접속자가 없습니다.</tr>";
    ?>
</table>

 
#current_connect { height:125px; overflow:auto;  }
#current_connect table {}
#current_connect table td { padding:5px !important; }
</code></pre>

<p><button>Copy</button></p>

<p><strong>

작동하고 있습니다.

1982600908_1672553190.5447.pnghttps://sir.kr/data/editor/2301/1982600908_1672553190.5447.png" />

 

이렇게 나오네요. 어딜 건들여야 될까요?

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

답변 3개

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

<div id="current_connect "> 내부의 요소가 z-index 값이 아무리 크게 잡아도 밖으로 표시될수가 없습니다.

따라서 <div id="current_connect "> 의 height 값이 180px 이상이어야 합니다.

그리고 아래쪽 요소를 클릭할때, 그 요소를 최상으로 스크롤 시키면 원하는 레이어가 모두 표시될 겁니다.

아래 코드를 페이지에 삽입하면 됩니다.

 

</p>

<p>$("#current_connect").css("height", "180px");</p>

<p>$("#current_connect .sv_member").on("click", function(e) {</p>

<p>  var par = document.querySelector('#current_connect');</p>

<p>  var pos = this.getBoundingClientRect().top - par.getBoundingClientRect().top;</p>

<p>  par.scrollBy(0,pos);</p>

<p>});</p>

<p>

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

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

플라이
2년 전

개발자 모드를 열어 해당 위치를 체크해서 테스트 디버깅해서 처리해 보셔야 할듯 합니다.

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

답변에 대한 댓글 3개

나방큰도그래
2년 전
썽피리님에게 댓글로 링크 달았습니다.
플라이
2년 전
확인해 보니 저 위치가 스크롤링 처리된 부분으로 가려져서 z-index로는 위로 올라올수 없는 구조 입니다.
나방큰도그래
2년 전
방법이 없을까요?..?

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

F
2년 전

링크를 올려보시죠. 단순히 저렇게 캡쳐와 css 조금으론 원인 파악 하기 힘듭니다. 

개발자 모드를 이용하셔서 css 속성 넣고 빼고 테스트 해보세요. 

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

답변에 대한 댓글 2개

나방큰도그래
2년 전
https://zcar.pe.kr/_application/notice 링크입니다
썽피리
2년 전
레이어가 스크롤되는 레이어 내부로 포함되는거라 지금 구조에선 나올수가 없네요.
편법으로 생각나는건 클릭했을때 나오는 사이드 뷰를 저 내부가 아닌 외부에서 위치시키고
클릭한 포인트에 사이드뷰를 띄우면 될것 같은데 그외엔 지금 현재로선 마땅히 떠오르는
아이디어가 없네요.

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

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

로그인