奇怪的堆叠行为（z-index）：通过图像层的边界“切割”

Question

这是我在 StackOverflow 上的第一个问题。

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

请帮忙！！！

我有重叠/相交元素的问题。奇怪的部分是 .png 图像“切穿”了恰好是 display:table 的同一个 div 元素的两个属性（图像将自己推到背景颜色和边框之间，并且以最奇怪的方式进行：白色字体覆盖边框，而其棕色背景位于黑色边框后面）这怎么可能？图像和 div 像互锁一样重叠（想象每只手的食指和中指形成互锁的 V）。 1（上）：图像中的白色字体； 2：div的黑色边框； 3：图像的背景颜色； 4（底部）：div的背景颜色。

我的头爆炸了。这是怎么回事，我怎样才能让图像找到正确的位置（在文本框的白色背景色后面）？

我已经尝试过使用 z 索引，但这似乎没有帮助。

<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 设置在 Google 开发工具（检查元素）中以“计算样式”显示带有删除线（非活动）和 z-index:auto ...

与它混淆的图像是一个简单的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。继续添加重现问题所需的所有代码并更新小提琴并给我们链接