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

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

Answer 2

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

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

Answer 3

删除 .verticalAlign 规则

上的溢出：隐藏

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

Answer 4

不确定你是否正试图像这样展示

enter image description here

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

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

4 个答案: