怎么写在心上？ [复制]

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 元素不具有 position 属性。

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

WORKING DEMO

或者您只需将position: relative 添加到您的跨度中。

Answer 2

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

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

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

JSFiddle

Answer 3

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 */
}