奇怪的堆叠行为（z-index）：border＆＃39; cut＆＃39;通过图像层

Question

这是我关于StackOverflow的第一个问题。

我为邻居建立了一个简单的网站。现在我来到谷歌搜索不再有帮助的地步。

请帮助!!!

我遇到重叠/交叉元素的问题。奇怪的是，一个.png图像会切断＆＃39;碰巧显示的同一div元素的两个属性：table（图像在背景颜色和边框之间移动并以最奇怪的方式执行：白色字体覆盖边框，而棕色背景位于黑色边框后面）这怎么可能？图像和div重叠，就像它们互锁一样（想象每只手的食指和中指形成互锁的Vs）。 1（顶部）：图像中的白色字体; 2：div的黑色边框; 3：图像的背景色; 4（底部）：div的背景颜色。

我的脑袋爆炸了。这里发生了什么，如何让图像找到正确的位置（在文本框的白色背景颜色后面）？

我已经尝试过使用z-indices，但这似乎没什么帮助。

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

.ul-wrap元素使用上述边框/背景设置样式：

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; 

更有意思的是，z-index：10000设置由于某种原因显示为删除线（无效）和z-index：auto in＆＃39;计算样式＆＃39;在谷歌开发工具（检查元素）......

与它混淆的图像是一个简单的PNG：

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

使用.hover_pic_holder和.hover_pic以下列方式设置样式：

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

啊，我现在可以添加一个文件： 谢谢！

Answer 1

我会把它放在评论中，但我的代表还不是50。 首先，我们肯定需要更多代码才能重现问题。 其次，你应该像img标签一样编码：

<br />

但你真的应该用css来创建你正在寻找的空间

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

第三，在.hover_pic_holder img的css中，vertical-align

中的连字符后面有一个空格

到目前为止，我已经提供了jsFiddle包含托管图片的所有代码。继续添加重现问题所需的所有代码并更新小提琴并给我们链接