Question

在此之后：Did CSS break my heart?，我现在拥有此JSFiddle，其中包含以下HTML：

<div id="heart"><span>M + G</span></div>

和这个（新）CSS：

span {
  z-index: 4;
}

然而，这些字母仍然在背后心脏，而我的目标是将它们放在它的中心并开始我认为我必须把它们放在心脏前面，但是这失败了，任何想法请？

Answer 1

z-index仅适用于定位元素（位置：绝对，位置：相对，......），而您的span elemet dosnt具有position属性。

#heart:before, #heart:after {
    z-index: -1; // because the text will be placed behind heart.
}

WORKING DEMO

或者您只需将position: relative添加到您的范围内。

Answer 2

span {
  position: absolute;
  z-index: 4;
}

更新为中心文字：

span {
  position: relative;
  line-height: 60px;
  z-index: 4;
}

#heart {
  text-align: center;
  position: relative;
  width: 100px;
  height: 90px;
  margin-top: 10px;
  /* leave some space above */
}

Answer 3

根据MDN docs，z-index只能应用于定位元素。

只需将span设置为position:relative;：

即可

span {
  position:relative;
  z-index: 4;
}

JSFiddle

怎么写在心上？

3 个答案: