How to write on the heart?

Question

Following this: Did CSS break my heart?, I now have this JSFiddle, which has this HTML:

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

and this (new) CSS:

span {
  z-index: 4;
}

However, the letters are still behind the heart, while my goal is to place them in the centre of it and for a start I thought I had to get them in front of the heart, but this fails, any idea please?

Please don't use "funny titles". This way it will be more likely that people searching for the same solution will find your questions. And SO will suggest appropriate duplicates. — Oriol, Mar 23 '16 at 23:13
That was not funny IMHO @Oriol, but if you have any suggestion, please let me know or feel free to edit the question! — gsamaras, Mar 23 '16 at 23:14
Maybe "funny" isn't the right word, but "Did CSS break my heart" seems to mean CSS caused emotional pain to you. — Oriol, Mar 23 '16 at 23:17
Oh you were talking about my old question @Oriol, sorry didn't get that! I see what you mean and I will be more careful in the future. I did, a bit. ;p — gsamaras, Mar 23 '16 at 23:19
@gsamaras Sadly not, because this question is marked as duplicate. Be cautious with titles next time ;) — tzi, Mar 23 '16 at 23:31
@choz thank you, I felt that this was the appropriate title for the question, thus you are not alone! ;) — gsamaras, Mar 24 '16 at 00:13

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

z-index only works on positioned elements (position:absolute, position:relative,...... ) and your span elemet dosnt have position property.

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

WORKING DEMO

or you just add position: relative to your span.

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 23 '16 at 23:04

elreeda

4,525
2
18
45

Any idea on how to move the text of the heart with this solution? – gsamaras Mar 23 '16 at 23:18
move it where ? centered ? – elreeda Mar 23 '16 at 23:19
Yes, you know in the center of the heart. – gsamaras Mar 23 '16 at 23:19
1

yes just add `text-align: center; line-height: 60px;` to `#heart` see [Demo](https://jsfiddle.net/arfc63Le/5/) – elreeda Mar 23 '16 at 23:21

Eihwaz · Answer 2 · 2016-03-23T23:21:50.687

1

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

Update to center text:

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

edited Mar 23 '16 at 23:21

answered Mar 23 '16 at 23:09

Eihwaz

1,234
10
14

I saw John's solution first, so I may accept that, but I will upvote something else you have posted in SO, as a sign of my thanks to you. – gsamaras Mar 23 '16 at 23:22
Please don't, keep SO clean :) Kudos to John, and happy you've found what you were looking for, though :) – Eihwaz Mar 23 '16 at 23:28
1

I upvoted something I read and thought it deserved the upvote!! I agree with you, if it was that you didn't have something I could admire, then I wouldn't upvote. ;) – gsamaras Mar 23 '16 at 23:29

score 1 · Answer 3 · answered Mar 23 '16 at 23:09

1

According to the MDN docs, z-index can only be applied to a positioned element.

Simply set the span to position:relative;:

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

JSFiddle

answered Mar 23 '16 at 23:09

Jacob G

13,762
3
47
67

How to write on the heart?

3 Answers3