css - 要素の Z インデックスが Chrome に表示されない

Question

For days I've been trying to get an element with a z-index of 1 to show through the top parent element. When the page was first built, the element (a small bucket in the lowest right hand corner under the title "May/June") on page: http://clifford-stage.scholastic.com/Calendar would did not need to be pushed into the corner but now since more text has been added it needed pushed over. I've moved the element around tremendously and placed it inside different containers, and turned positioning from absolute to relative, even of its parent(s), and have set negative z-index.

Here is the CSS of the element:

#bucket{
    top: 74px;
    right: -29px;
    position: absolute;
    z-index: 1;
    }

and it's parent's CSS (sorry, page is the page is too large to paste all of the code:

.yCenter{
     display:table-cell;
     vertical-align:middle;
     text-align:center;
     width:219px;
     height:112px;  
    }

Here is the HTML:

        <li class="oddBox">
            <div class="verticalAlign">
                <div class="yCenter">
                    <img alt="May and June Calendar" id="bucket" src="/resource/uploads_clifford/Calendar/img/may-june-img.png" />
                    <h4>
                        May/June</h4>
                    <p>
                        Ocean Habitat<br />
                        Summer Fun</p>
                    <h6>
                        Posters:</h6>
                    <p class="smallList">
                        &bull; Sea Animal &bull; Sink and     Float</p>

確認が必要なコードがさらにある場合はお知らせください。もちろん、ページ コードは Chrome 要素検査ツールで表示できます。

見てくださった方、本当にありがとうございました。

Answer 1

から削除overflow:hidden:

.verticalAlign {
position: relative;
overflow: hidden;
display: table;
width: 219px;
height: 112px;
}

またはoverflow:visible、リスト内の特定の div に設定します。

Answer 2

画像をどこかにコピペできないので、IDの上と左だけ変えました。

#bucket{
   left: -90px;
   position: absolute;
   top: -280px;
   z-index: 1;
}

Answer 3

.verticalAlignルールのoverflow:hiddenを削除します

.verticalAlign {
   position: relative;
   /* overflow: hidden; */ /* remove this line */
   display: table;
   width: 219px;
   height: 112px;
}

Answer 4

わからない

#bucket {
top: 74px;
right: -7px;
position: absolute;
z-index: 1;
}