Wicket Bootstrap navbar と pagenation

Wicket で、Bootstrap を採用して navbar と Wicket の DataView で描画するページング
を Bootstrap の Pagenation にするようにした時、
デザイン作業中は問題ないのですが、
z-index の指定をしないと、 navbar のドロップメニューが Pagenation の下に隠れてしまいます。

これは困ります。

期待するのは、以下です。

ＨＴＭＬ

<div>
   <nav class="navbar navbar-expand-lg navbar-dark bg-info">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button"
 data-toggle="collapse"   data-target="#sample_Navbar"
 aria-controls="sample_Navbar" aria-expanded="false"
 aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
      </button>
      <div id="sample_Navbar" class="collapse navbar-collapse">
         <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
               <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
            <li class="nav-item dropdown">
               <aclass="nav-link dropdown-toggle" href="#" id="navbarDropdown"
                role="button" data-toggle="dropdown" aria-haspopup="true"
               aria-expanded="false"> Dropdown </a>
               <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#">Action 1</a> <a
                     class="dropdown-item" href="#">Action 2</a> <a
                     class="dropdown-item" href="#">Action 3</a> <a
                     class="dropdown-item" href="#">Action 4</a> <a
                     class="dropdown-item" href="#">Another action</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Something else here</a>
               </div></li>
            <li class="nav-item"><a class="nav-link disabled" href="#"
                tabindex="-1" aria-disabled="true">Disabled</a></li>
         </ul>
         <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search"
               placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-dark btn-sm" type="submit">Search</button>
         </form>
      </div>
   </nav>
</div>

<div wicket:id="paging" id="paging">
   <nav>
      <ul class="pagination">
         <li class="page-item">
            <a class="page-link" href="#" aria-label="Previous" disabled="disabled">
             <span aria-hidden="true">&laquo;</span>
             <span class="sr-only">Previous</span>
            </a>
         </li>
         <li class="page-item"><a class="page-link" href="#" disabled="disabled">1</a></li>
         <li class="page-item"><a class="page-link" href="#">2</a></li>
         <li class="page-item"><a class="page-link" href="#">4</a></li>
         <li class="page-item"><a class="page-link" href="#">5</a></li>
         <li class="page-item"><a class="page-link" href="#">6</a></li>
         <li class="page-item"><a class="page-link" href="#">7</a></li>
         <li class="page-item"><a class="page-link" href="#">8</a></li>
         <li class="page-item"><a class="page-link" href="#">9</a></li>
         <li class="page-item"><a class="page-link" href="#">10</a></li>
         <li class="page-item">
            <a class="page-link" href="#" aria-label="Next">
            <span aria-hidden="true">&raquo;</span>
            <span class="sr-only">Next</span>
            </a>
        </li>
      </ul>
   </nav>
</div>

対処していないＣＳＳ

.navbar a.dropdown-toggle:focus, .navbar a.dropdown-toggle:hover{
   color: #ffffff;
   background-color: #128091;
   box-shadow: 0 0 0 0.2rem rgba(227, 144, 169, 0.25);
}
.dropdown-item:active{
   color: #ffffff;
   background-color: #17a2b8;
}
.dropdown-item:hover{
   color: #ffffff;
   background-color: #17a2b8;
}

（解決方法）
navbar に、z-index: 1000; を指定します。
デフォルト z-index; 1000; だと思いますが敢えて明示的に指定する。

.navbar{
   z-index: 1000;
}

Pagenation の方を、z-index で低く、
確実に指定するので、!important まで付けます。

.pagination{
    z-index: 1 !important;
}

あるいは、Wicket ID と id 属性まで指定して pagination より
上位層の id="paging" につけても
良いでしょう。

#paging{
    z-index: 1 !important;
}