css - 元素的 Z-index 不会在 Chrome 中显示

Question

几天来，我一直在尝试让一个 z-index 为 1 的元素通过顶部父元素显示。首次构建页面时，页面上的元素(标题为“May/June”下右下角的小桶): http://clifford-stage.scholastic.com/Calendar不需要将其推到 Angular 落，但现在由于添加了更多文本，因此需要将其推到一边。我已经极大地移动了元素并将其放置在不同的容器中，并将定位从绝对位置转变为相对位置，甚至是其父元素的位置，并设置了负 z-index。

这是元素的 CSS:

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

它是父级的 CSS(抱歉，页面太大，无法粘贴所有代码:

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

这是 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;
}

或者为列表中的特定 div 设置 overflow:visible。