Strange stacking behavior (z-index): border 'cuts' through image layers

Question

This is my first Question on StackOverflow.

I'm building a simple website for our neighbors. Now I came to a point where googling doesn't help any more.

Please Help!!!

I have a problem with overlapping / intersecting elements. The weird part is that a .png image 'cuts through' two properties of the same div element that happens to be display:table (the image shoves itself in between background-color and border AND does it in the weirdest way: the white font covers the border, while its brown background sits behind the black border) How is this even possible? Image and div overlap like they're interlocked (picture your index and middle fingers of each hand forming interlocked Vs). 1(top): white font in image; 2: black border of div; 3:background color of image; 4(bottom): background-color of div.

My head explodes. What is going on here and how can I make the image find its right place (behind the whitish background-color of a text box)?

I already tried playing with the z-indices but that didn't seem to help.

<div class="ul_wrap ul_bottom">

  <ul>You can Choose between these Complementing Treats:<br><br>

    <li>» Coffee-Enriched Scrub</li>

    <li>» Skin Whitening Scrub</li>

    <li>» Exfoliating Sea Salts</li>

    <li>» Essential Oils (Lavender etc.)</li>

  </ul>

</div>

The .ul-wrap element is styled with the above-mentioned border / background:

position: relative;
height: 100%;
right: 0;
left: 0;
margin: 0 auto;
display: table;
background-color: rgba(255,255,255,0.4);
border: 1px solid black;
border-radius: 12px; 

And more interesting maybe, the z-index:10000 setting for some reason shows with a strikethrough (inactive) and z-index:auto in 'computed style' in Google dev tools (inspect element) ...

The image that messes with it is a simple PNG:

<div class="hover_pic_holder">
  <img class="hover_pic" src="img/hover_close.png" />
</div> 

with .hover_pic_holder and .hover_pic styled in the following way:

.hover_pic_holder {position:fixed;left:20px; width:5%; height:100%;top:25%;z-index: 10;}
.hover_pic_holder img {position:absolute;margin-top:0 auto; margin-top:0 auto;left:-16px; vertical-   
align:center;}

.hover_pic {width:80px;}

Ahh I can now add a file: Thank you!

Answer 1

I would've just put this in a comment but my rep is not 50 yet. First, we definitely need more code in order to reproduce the issue. Second, you should code breaks like img tags:

<br />

but you really should be using css to create that space you are looking for anyway

 ul li:first-child{
    margin-top: 20px;
}

Third, in your css for .hover_pic_holder img there is a space after the hyphen in vertical-align

I have made a jsFiddle with all the code you gave us so far including a hosted image. Go ahead and add all the code needed to reproduce the issue and update the fiddle and give us the link