jQuery-uiを使ったドラッグ＆ドロップが可能なカラムをposition:fixed;overflow:scroll;を適用したwrapperの外に最前面で出したい

イメージ説明 jQuery-uiを使いカラムを移動可能にして、カラムのあるwrapperに画面のスクロールをした際も追従するようにposition:fixedとカラムが多くなった場合にも表示できるようにwrapperにoverflow-y:scrollを適用しました。
しかし、移動するカラムがwrapperの外に表に出ず、裏に回って移動する形となりました。(カラムのz-indexがwrapperの周りの要素よりも低くなっているような挙動です。)

カラムを最前面に出す方法はありませんでしょうか？
よろしくお願いいたします。

HTML
//問題のwrapperです
<div class="bookWrapper">
    <p id="bookmarkError"></p>
    <h1 id="bookmarkTitle">ブックマーク</h1>
    <div class="bookmark">
        <div class="bookmarkColumn"></div>
        <ul class="bookUl">
            //このカラムを移動させます
            <li class="bookLi"></li>
            <?php if (isset($showResult)) : ?>
                <?php foreach ($showResult as $show) : ?>
                    <li class="bookLi">
                        <div class="bookmarking">
                        </div>
                    </li>
                <?php endforeach ?>
            <?php endif ?>
        </ul>
    </div>
</div>

CSS

.bookWrapper{
    position: fixed;
    top:53px;
    right:0;
    left:10px;
    bottom:0;
    width:49%;
    height:auto;
    display:inline-block;
    overflow-y:scroll;
    overflow-x:visible;//hiddenにした場合でも一緒でした
    border:1px solid black;
    float:left;
    padding-bottom:30px;
    z-index: 1;
}

.bookLi{
    position:relative;
    z-index:999999999999 !important;//効きません
}

.bookmarking{
    height:auto;
    min-height: 40px;
    position: relative;
    border:1px solid black;
    background-color: rgba(255,255,255,0.3);
    z-index:999999999;//効きません
    width:500px;
    margin-top:10px;
    text-align: center;

jQuery
$('.bookUl').sortable({
                    connectWith: '.dragUl',
                    placeholder: 'memoDiv',
　　　　　　　　　　　　//これを設定しなければカラム移動時にwrapperが無限に広がります
                    scroll:false,