CSS：如何防止 div 的背景颜色位于其上方图像的后面？

Question

我有一个 div，我对其应用了负边距，以便它位于图像的顶部。我还给了那个div一个背景颜色。发生的情况是（div 的）文本出现在 div 上方，正如我所期望的那样，但该 div 的背景颜色出现在图像后面，这是我不期望的。如何让 div 的背景颜色位于图像上方？该* *:before *:after规则来自引导程序。我知道我可以使用绝对定位，但我内心深处知道负边距是完全合法的。

这是我的证明： http:
//jsfiddle.net/BB4d2/1/

HTML：

<ul class="profile-kids">
  <li class="profile-kid">
    <img class="f" src="http://lorempixel.com/g/300/300/people/" height="150" width="150">
    <div class="kid-text">Girl</div>
  </li>
  <li class="profile-kid">
    <img class="f" src="http://lorempixel.com/g/300/300/people/" height="150" width="150">
    <div class="kid-text">Girl</div>
  </li>
  <li class="profile-kid">
    <img class="m" src="http://lorempixel.com/g/300/300/people/" height="150" width="150">
    <div class="kid-text">Boy</div>
  </li>
</ul>

CSS：

*, *:before, *:after {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul.profile-kids {
    list-style-type: none;
    padding-left: 0px;
}
li.profile-kid {
    display: inline-block;
    margin-bottom: 20px;
    margin-right: 10px;
    cursor: pointer;
}
img.f {
    z-index: 0;
    border: 10px solid rgb(254, 134, 164);
    border-radius: 75px;
    display: inline-block;
}

img.m {
    border: 10px solid rgb(120, 192, 249);
    border-radius: 75px;
    display: inline-block;
}

div.kid-text {
    background: #FFFFFF;
    text-align: center;
    width: 150px;
    font-size: 20px;
    margin-top: -100px;
}

Answer 1

只需分配position: relative;给div.kid-text

演示

div.kid-text {
    background: #FFFFFF;
    text-align: center;
    width: 150px;
    font-size: 20px;
    margin-top: -100px;
    position: relative;
    z-index: 999; /* Optional */
}

z-index: 999;另外，为了安全起见，您可以使用...