几天来,我一直试图让一个 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">
• Sea Animal • Sink and Float</p>
如果还有更多代码需要查看,请告诉我,当然页面代码可以在 Chrome 检查元素工具中查看。
非常感谢任何有看过的人。