怎么写在心上？

Question

跟随这个：, I now have this JSFiddle，其中有这个 HTML：

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

和这个（新）CSS：

span {
  z-index: 4;
}

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

Answer 1

z-index 仅适用于定位元素 (position:absolute, position:relative,......) 并且您的 span 元素没有 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

怎么写在心上？

How to write on the heart?

html

css

geometry

css-shapes