使Div背景超越图像

Question

我正在尝试将div背景设置为图像

类似于Stackoverflow的更改图像功能

但即使Z指数较高，我也无法将其覆盖在图像上

<div class='sxlb'>
    <label class="control-label" for="textinput">Profile Picture:</label>
</div>
<div class="sxlm">
    <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQu2JTWiJGx5MEdj5Tz7UUnqXjvkk8adgY9ayp9pwqJ8J-gAnCWjzPPaBBF8w" style="z-index:-1" />
    <div id="changeImage" style="color:black; text-align:center;display:none;margin-top:-20px; z-index:100;background-color:gray;"><a href="#">Change Image</a>

    </div>
</div>

我为问题做了一个示例演示小提琴

Demo Fiddle

请告诉我这里缺少什么。

Answer 1

使用（默认）static position但使用positioned元素设置元素时，z-index不起作用。

无论如何，如果将内部元素的位置设置为z-index，则实际上不需要使用absolute。

请看this solution。