0

几天来,我一直试图让一个 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 检查元素工具中查看。

非常感谢任何有看过的人。

4

4 回答 4

2

从以下位置删除overflow:hidden

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

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

于 2013-10-16T14:40:44.953 回答
0

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

在此处输入图像描述

#bucket {
top: 74px;
right: -7px;
position: absolute;
z-index: 1;
}
于 2013-10-16T14:43:47.067 回答
0

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

#bucket{
   left: -90px;
   position: absolute;
   top: -280px;
   z-index: 1;
}
于 2013-10-16T14:42:02.523 回答
0

删除溢出:隐藏.verticalAlign规则上

.verticalAlign {
   position: relative;
   /* overflow: hidden; */ /* remove this line */
   display: table;
   width: 219px;
   height: 112px;
}
于 2013-10-16T14:42:09.680 回答