После этого: Разбил ли CSS мне сердце? теперь у меня есть это JSFiddle со следующим HTML-кодом:
<div id="heart"><span>M + G</span></div>
и этот (новый) CSS:
span {
z-index: 4;
}
Однако буквы по-прежнему находятся за сердцем, а моя цель разместить их в его центре и для начала я думал, что должен получить их перед сердцем, но это не удается, есть идеи пожалуйста?
z-index работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная,......), а ваш span элемент не имеет свойства position.
#heart:before, #heart:after {
z-index: -1; // because the text will be placed behind heart.
}
или вы просто добавляете position: relative к своему промежутку.
Согласно документам MDN, z-index можно применять только к позиционируемому элементу.
Просто установите span на position:relative;:
span {
position:relative;
z-index: 4;
}
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 */
}
text-align: center; line-height: 60px;к#heartсм. демонстрацию 24.03.2016