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

Question

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

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

Answer 2

不确定这是不是你想像这样展示水桶

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

Answer 3

由于我无法将图像复制并粘贴到某处，我只是更改了 ID 的顶部和左侧。

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

Answer 4

删除溢出：隐藏在.verticalAlign规则上

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