After days of troubleshooting, I have been struggling to make an element with a z-index of 1 visible over its parent element. Originally, the element (a small bucket in the bottom right corner under the title "May/June") on this page: did not need to be adjusted, but due to additional text added to the page, it now needs to be pushed over. I have tried moving the element around extensively, putting it in different containers, and changing its positioning from absolute to relative, even adjusting its parent elements, and setting a negative z-index.
Here is the CSS code for the element:
#bucket{
top: 74px;
right: -29px;
position: absolute;
z-index: 1;
}
and the CSS for its parent element (apologies, the page is too large to paste all the code):
.yCenter{
display:table-cell;
vertical-align:middle;
text-align:center;
width:219px;
height:112px;
}
Below is the HTML code:
<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>
If more code needs to be reviewed, please let me know, as the page code can be viewed in Chrome's inspect element tool.
Thank you to anyone who can assist with this issue.